Leaderboard

It's hard to say what the problem is without seeing it. First, make sure you don't have CSS animations that are animating the same properties as GSAP. Same goes for jQuery. Your're using fadeIn/Out. I would only use GSAP. I noticed a setTimeout, which can cause timing problems when working with animations. Use TweenLite.delayedCall() instead. https://greensock.com/docs/TweenLite/static.delayedCall It can also be canceled. https://greensock.com/docs/TweenLite/static.killDelayedCallsTo But the thing that sticks out the most is that you are using from animations in one of your callbacks. Rapidly click the button in the demo below to see how that can result in unexpected behavior. It's very easy to break your demo doing the same. Another thing to be aware of when using from animations is immediateRender. https://greensock.com/immediateRender

That was really helpful. Thank you!

Hi @Rezpo, Did you expect this effect? Use x and y values to move the eyes. And: both IDs or set a common class like '.eyes': Happy tweening ... Mikel

Hi @Nathan Harold Welcome to the forum. When you have ScrollMagic hijack the tween/timeline duration you have to think in ratios or percentages. Here's a really basic example: You'll see three boxes on a timeline. All three start at the same time and move 500px on the x axis. They each have a different duration. (Red:1, Green:5, Blue:10) The duration of the timeline is 10 seconds. I've set the ScrollMagic duration to 50% of the window height. Since the blue box tween has a duration of 10 seconds, it takes the full scroll distance to complete its animation. Whereas the green duration is 5 so it takes 50% of the scroll distance and the red with a duration of 1 only takes 10% of the scroll distance to finish. It doesn't really matter what duration you set in ScrollMagic. You'll still see the same ratio in the above scenario. Blue:100% of the scroll distance, Green: 50% of the distance and Red:10% of the distance. When you have a whole timeline that has sequential tweens, the same thing happens. Say you have this timeline: tl.to (".red", 3, {x:500}); tl.to (".green", 1, {x:500}); tl.to (".blue", 1, {x:500}); The total duration of that timeline is 5 seconds. So the red box will take 60% (3/5) of the scroll distance and the green and blue boxes will each take 20% (1/5) of the scroll distance to complete. Again it does not matter if the ScrollMagic duration is 100px or 10,000px, the percentage of the scroll distance for each of the tweens to complete remains the same. Make sense? Happy tweening.

Hi and welcome to the forum Reversing a loose collection of tweens will be a bit tricky. That's where you'd want to use a timeline. Here's a fork of your pen that reverses by setting the repeat count to 1 and yoyo to true. Of course you can set the repeat count to anything you like. Setting it to -1 will repeat infinitely. You can also add a button to control the reverse too. More info about timelines: https://greensock.com/docs/TimelineMax More info about the position parameter. https://greensock.com/position-parameter Hopefully that helps. Happy tweening.

Thank you so much for your reply!! This has given me plenty to work with and think about, i really had hit a dead end with this one as frustratingly it was working perfectly on the dev machine and i was unaware of a problem. It was only when deploying to other machines it i found an issue. i had never really experienced this with electron as its usually pretty consistent between devices as it has the browser packaged, but at least it enlightened me to the errors in my code. I am sure you have cracked it and that my problem lies within the from animation callback as your demo pen is doing very similar things to what i am experiencing. The setTimeout() was really just to simulate the loading time of the app as there is a splash screen and isn't used for any animation timings. Hopefully that isn't causing problems in this instance. However, i am using it in another animation for a side menu popup that auto closes so this information is extremely useful and i will rewrite that also! I'll use GASP for fade transitions and remove Jquery. i will work on this again this evening and will follow up with my results Thanks again! I have just joined the club!!

Hello, Yes I'm a member and I've downloaded GSAP Libraries from GSAP Club. I found the issue, first I've imported CustomEase.js and got an error "Uncaught ReferenceError: CustomEase is not defined", then I tried with CustomEase.min.js and it works! So the issue is in the uncompressed version of the plugin, if you're interested in I created a github repo reproducing the error: https://github.com/mrk197702/GSAP-CustomEase Thanks

@Gabriel Norman Based on the site you referenced, scroll may not be your best option. Below is a pen that I modified from Sahil which may be helpful.