Fritz1602 Posted January 26, 2021 Share Posted January 26, 2021 Hi Guys, I am trying to create a seamless "clipMask Text Marquee", with a timeline. The tl is started (and paused) by ScrollTrigger. Basically everything works as desired, but I have trouble with resizing. The height of the text (trigger Element) is changed by a js function. After Resizing the hight, the position of the triggers become wrong. Is there a way to update them? Or is there generell a better apporach? I am not a big expert (as you guessed) and very thankful, for honest “code critique”. Furthermore I wonder, if and how I have to kill the timeline in PJAX-context. By now it works, when I kill the ScrollTrigger (before entering) the Page and call the createMarquee (after entering) again. Is this enough or is the (old and unused) Timeline (created by function) still present somewhere in memory? Sorry for my English and many thanks in advance. See the Pen eYdqdpR?editors=0110 by fsi77 (@fsi77) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 26, 2021 Share Posted January 26, 2021 Hey Fritz1602. Good work so far! A few notes: ScrollTrigger automatically refreshes on resize so you don't need to add that functionality yourself. If you find yourself doing something like onEnter: () => tl.play() inside of a ScrollTrigger you should probably think about if you can change your ScrollTrigger to use the animation and toggleActions properties instead. You can in this case If you want values in an attached animation of a ScrollTrigger to update on refresh, you should use invalidateOnRefresh: true. Also make sure that the properties that you want to update are functional values. If you are pairing a timeline with a ScrollTrigger it probably makes sense to create the ScrollTrigger inside of the timeline vars. You're calling your svgSizing function twice the first time when it only needs to be called once. Generally it's best to apply the repeat: -1 to a timeline if you're using a timeline instead of on the tween itself. Altogether applied to your demo: See the Pen bGwXYoz?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Fritz1602 Posted January 26, 2021 Author Share Posted January 26, 2021 Hey @ZachSaucier you really rock! Thank you for your friendly, super competent and quick help. GSAP is so cool and luckily I still have a lot of room for improvement, as you have impressively demonstrated 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now