Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Carl last won the day on April 4 2019

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,152
  • Joined

  • Last visited

  • Days Won

    532

Everything posted by Carl

  1. Hi and welcome to the GreenSock forums, Thanks for the demo. Things are actually working as they should. from() tweens animate a property value from the value you specify to the current value. When your demo first loads the x of the boxes is 0% (the current value) so your animation tweens from x:100% to x:0% However while the animation is playing you could click the button when x is 50%, in that case you will animate from x:100% to x:50% If you keep pressing the button quickly it's very likely there will be very little distance between the current x value and the from value... which makes it appear to be stuck. a solution in this case is to use fromTo() where you hardcode both the start and end values like: Another issue is that you were adding new tweens to the end of your timeline on each click. There really isn't any need for a timeline for something like this, so a single TweenMax.fromTo() will work fine.
  2. That's ok. No need to re-post. Our AS3 forum is archived and made available for people to search for answers. We haven't actively developed or supported AS3 for many years. Unfortunately this isn't the type of thing we can devote much time towards. AS3 does support rotationX and rotationY so you really shouldn't worry about faking the 3D aspects. In the demo you provided the amount of rotation is directly related to the speed of the mouse movement, so a tween (which has a fixed duration and end values) isn't really a good solution. Use a mousemove event and use the same approach as the JS version. I'm confident the AS3 solution will appear 95% identical to the JS version with some very minor syntax variations.
  3. Carl

    NS_ERROR_FAILURE

    fill:"none" is just a color value. It shouldn't throw any errors. Please try to replicate the error in a CodePen so we can see exactly what is happening. Thanks!
  4. Thanks for the demo. In general you just need to save a reference to the current animation and then each time you click something you tell the current animation to reverse. I did that in the demo below: Click a different green div or button each time. you will see that the current animation reverses while the newly selected timeline plays forward. However there is a big problem. If you click the same div or button in sequence things get messy. It appears your code is trying to be a bit too clever and concise. You are creating 6 timelines when you only need 3. You have 6 elements with a class of .part but you are only animating 3 things. You need to restructure your code a bit so that you are only creating 3 timelines. I would suggest putting each timeline in an array and then when you click on a div or button you find out what "its" timeline is based on its own index or attribute somehow. You need button1 and div1 to know to to control the first timeline the array.
  5. Hi and welcome to the GreenSock forum. I'd recommend studying @PointC's approach here for handling resize: https://greensock.com/forums/topic/19393-fullscreen-sliders-horizontal-and-vertical/
  6. Hi and welcome to the GreenSock forums, To be clear, you're looking for a solution in ActionScript 3.0?
  7. Thanks for the demos. I would suggest you remove everything from your file so only the <rect> is there. If there is still a problem then at least you know it has nothing to do with GSAP or any other code you are using. I noticed your rect has no width or height attributes. Maybe see if adding them helps. Not really too familiar with IE11's quirks.
  8. Carl

    NS_ERROR_FAILURE

    is there any way you can supply a reduced test case? or can you give us the exact steps in order to see the issue? I had a pretty bad time trying to use the site and I'm not sure what I'm supposed to be looking for. I didn't see the error you mentioned but there were plenty of times I couldn't click on things I thought should be clickable like "read more" text. The most common reason for that error is that you are trying to use DrawSVG on an SVG that is not yet rendered. Maybe that will help you track it down. Unfortunately, its just way too time consuming for us to try to debug a live site with tons of javascript crammed into a single file.
  9. Thanks for the demo. Looks like you just need to load ScrollToPlugin.min.js https://jsfiddle.net/bw1drmnq/
  10. Thanks for the demos. Its generally better to animate the x transform instead of left. Does this work better for you?
  11. Its fine to have your question here. However, I don't have a solution for you. You might do better in stackoverflow or a forum related to canvas or more general development topics.
  12. Carl

    morphSVG

    Yup, as Dipscom said a demo would really help. My only guess is that #due is not a proper <path> element. At the very least please provide your svg code as there isn't much we can do with out that. Thanks!
  13. another option is to build your main timeline out of a series of tweenFromTo() tweens on your slide animations. In the example below you will see that the timelines (green, orange, grey) are only created once. They are never added to the master timeline. The master timeline is only adding tweens that literally scrub the playheads of those individual timelines. https://greensock.com/docs/TimelineMax/tweenFromTo
  14. I spent a few minutes looking at your code and didn't get very far. The purpose of these forums is to help people with questions related to the GSAP API. As you can probably imagine, it takes quite a bit of time to look at 200 lines of code and figure out what its supposed to do... and even more time to try to figure out what isn't working. I've never looked at Jonathan's code before, and even though it is working great... it would take awhile to study. Since you have 90% of things working and the only problem is the rendering of that "cube", I would suggest you create a new pen and just create a very simple demo that has that cube built the way you want it and try to animate it with a timeline (without any human interaction). I think if you come back with just a cube and a few lines of timeline code to animate and there is still a problem, we will have a better chance to help you.
  15. Rodrigo, excellent job teaching stagger school! —- this is is an interesting scenario. The child timeline in this case is a TimelineLite and getLabelsArray() is a method of TimelineMax. Not sure what the solution is other than using a loop instead of a stagger.
  16. I don't have anything with a clock, but the code below shows something animating from left to right. Hopefully it will give you some ideas about how to move your clock.
  17. Hi and welcome to the GreenSock forums, Thanks for the demo. That's quite a bit of code to go through. I think the biggest issue is that you are asking the browser to do a ton of work on each mousemove and mousemove fires at a super fast rate. Please add a log to one of your mousemove functions like function moveCircle(e) { console.log("move") TweenLite.to($circle, 0.7, { css: { left: e.pageX - $(".tween-container").offset().left, top: e.pageY - $(".tween-container").offset().top }, z: 0.1 }); Open the browser console and move the cursor around the element. You could see "move" log out a hundred times moving just a tiny distance in a short amount of time. On each move you creating a bunch of tweens on a bunch of svg elements and then instantly killing all those tweens and creating new ones on the next move. Please read this article on throttling and debouncing to learn how to limit how often you create new tweens: https://css-tricks.com/the-difference-between-throttling-and-debouncing/ Although not the biggest problem, you will get better performance using transform values like x and y instead of top and left when moving divs -- I did notice that certain nodes do get sluggish independently and do kind of stay that way. I don't have an explanation for that.
  18. Chrome and Safari are working but every time triggers the error, by another hand Safari just doesn't work at all. that's a bit confusing. I'm guessing one of those should be FireFox. I see it working fine in Chrome and FireFox, but it does not work in Safari. I'm sure @GreenSock will investigate further and let you know of any possible solutions / workarounds. Thanks for reporting the issue.
  19. yeah, that codepen demo works fine for me too.
  20. Can you please supply the link to the CodePen that isn't working? Thanks!
  21. Hi and welcome to the GreenSock forums. Thanks for the demo. Draggable.create() returns an array of Draggables. You can only call disable() on a single instance of a Draggable. https://greensock.com/docs/Utilities/Draggable/static.create() To call disable() on the first element you could do: rotationDrag[0].disable();
  22. The problem is that you can only call staggerTo() on a TimelineLite that you have instantiated var tl = new TimelineLite(); tl.staggerTo('things', 1, {x:200}, 0.2); There's nothing in your code that explains why TimelineLite isn't loading. Please be sure to follow the methods described in the NPM usage guide: https://greensock.com/docs/NPMUsage
  23. Your code at line 307 is incorrect .fromTo('.featImg', 1, {x: "-80%", ease: Power4.easeOut}, "-=1.9") You are using a fromTo but you need from AND to values, something like: .fromTo('.featImg', 1, {x:"-20%"}, {x: "-80%", ease: Power4.easeOut}, "-=1.9") Looking through your code it appears you are defining an ease in both the from and to vars. You only need it once, in the to vars. Also there are some awkward position parameters .to( ".slide" , 1 ,{ width: '100%', height: '100vh', padding: '40px', ease: myEase }, "-+1"); // should be "+=1" or "-=1" In the future, please provide a reduced test case. It will make things much easier for us and you to isolate the problems. thanks
  24. If you check your console, you'll see a message saying that Draggable must be loaded. FWIW morph origin isn't really going to help much when you multiple path segments like that.
  25. the demo below shows how you can create elements and add them to an existing animation that is running. Once the demo loads, hit the button a bunch to create elements. Their animations will be inserted at the timeline's current time()
×