Leaderboard

I think issue has to do with ScrollMagic and how it handles tweens that are animating same property that conflicts. ScrollMagic is not GSAP product, you should try posting issue on Github. https://github.com/janpaepke/ScrollMagic Alternate solution would to use fromTo tweens, with immediateRender disabled on all tweens except first one. And setting duration on your scenes, you will notice jumps because your element animates 400 pixels but you are scrolling only 300 pixels. A better solution would be to use enter/leave events to create new 'to' tweens inside the event handler so there won't be conflicts. When you define a to tween, GSAP will animate element from current position to the target position, so when you scroll and refresh all wrong values get recorded and create conflict. When you define from tween, GSAP will animate from given position to current position. But by default immediateRender is set to true so GSAP will set your element in that position that's why you need to set it to false on 2nd and 3rd tween.

Hi @rhut_tiger, The Timeline - call it newTime - is part of the function getNewTimeline where it becomes cleared and updated on currentTime. The result (return newTime;) of the function is a fresh newTime. Best regards Mikel

Thanks for the demo. The time value gets recorded when that tween is added to your timeline. It doesn't automatically keep updating. For something like this its best to create a new tween for your timeline or create a new timeline each time you want to play. The demo below calls a function that clears your timeline and puts a fresh new tween inside it i'm using a random number so that you don't have to wait a minute to see a new value. feel free to switch it back to what you had.

When you define a from tween, GSAP will set your element to that position and animate back to original position. So for example if your element is at 0 and you create a from tween with value of 100, GSAP will set your element to 100 and animate back to 0. If while creating the tween if element was at 50, then GSAP will animate from 100 to 50. If it was already at 100, then nothing will happen because start and end positions are same. I removed each because it was unnecessary. You can still use each and it will work. Also, with GSAP you don't need anything like jQuery's stop. GSAP overwrites any tweens for same property of the element by default. You can change the overwrite behavior if you ever need, check the docs. https://greensock.com/docs/TweenLite You can visit the learning page and youtube channel to get familiar with GSAP API, https://greensock.com/learning https://www.youtube.com/user/GreenSockLearning

It is still not clear what you are trying to do. But it feels like what you want is, if you click on new box old one should hide the content, Correct? You can check rest of the demos by @OSUblake in following thread,

Nevermind guys. Just stupid html order. ☠️ I put all the "script tags" between header and main-page LOL. Thanks @Sahil for the reply & help, such an extreme fast & nice community. Will coming here again later. Thanks.

When something doesn't work check developer console by hitting F12 to see if you are getting any errors. Your demo was missing jQuery, you can add that from codepen settings. Feel free to post GSAP related questions.

It's difficult to troubleshoot with just a screengrab. Do you think you could put together a simple demo that demonstrates the problem? Thanks.

I'd imagine there would be a number of ways to make it happen. Depending on the complexity you need, canvas would probably be a good solution. @Sahil has a neat canvas demo with some trails. @OSUblake has a cool one using SVG. Happy tweening.

@Sahil Oh jeez, it's that simple... Thank you so much. This will also help me in further tweening!

You just need to pause the timeline so it won't autoplay and get in the way. Does that help?

Those values get passed as string. You need to create JSON string and parse it. <div data-from='{"yPercent": "0", "rotation": "0"}' data-to='{"yPercent": "-100", "rotation": "5", "ease": "Expo.easeOut"}'> const from = JSON.parse(el.dataset.from); const to = JSON.parse(el.dataset.to); Double quotes are important, if you don't want to use quotes, you will find some stack overflow threads with regex solutions. You can also encode JSON string from server in PHP, there will be equivalent solutions for other languages.

Hi @greykrav, It's BlackWeekend ... Best regards Mikel