Jump to content
Search Community

Recalculate ScrollsTrigger after recalculation of trigger Element (in SVG)

Fritz1602 test
Moderator Tag

Recommended Posts

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

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

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...