Jump to content
GreenSock

kabocreative

ScrollTrigger timelines - don't play until in view?

Go to solution Solved by mvaneijgen,

Recommended Posts

Hello GSAP-ers!

I've got a series of icons, each with their own timeline. I'd like them to only animate when in view, so I'm using scrolltrigger to play onEnter and onEnterBack as per:

 

toggleActions: "play pause play pause"


I would expect them to be paused unless in view, but t2 and t5 are always playing. I wondered if this might be related to having scrolltrigger and defaults applied to the timline, but when I remove the defaults they still animate before coming into view.

 

Primary question: Any ideas on how to prevent t2 and t5 from playing when not in view greatly appreciated.

Secondary question: repetitive code
As a secondary point I'm running the same scrolltrigger on 7 timelines, which feels excessively repetitive:

 

scrollTrigger: {
  trigger: "#div-id", toggleActions: "play pause play pause"
}

think I want a forEach loop here, but every example I come across is for running the same animation repeated times, while each timeline here contains unique animations. instead of '#div-id' which is unique for each timeline, '.section' could be used as each item is in a .section div.

Any ideas to tidy up my excessive code here greatly appreciated as I'm certain it is too lengthy!

See the Pen mdLKbdo by kabocreative (@kabocreative) on CodePen

Link to comment
Share on other sites

  • Solution

Small typing error. It is camelcase scrollTrigger and at these timelines you've typed ScrollTriggerwith a starting capital. When I enabled markers I could easily spot that these had no ScrollTrigger associated with them.

 

See the Pen yLjENEz?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 4
Link to comment
Share on other sites

Heya!

 

Just adding that there's nothing wrong with a little repetition (in my opinion). I think some people get too hung up on that and make their code less readable. I tend to focus on readability first.

For instance, I'd keep your timeline declaration with the timeline it's controlling. You could use defaults to set a global toggleAction, but honestly it's fine to just define that per timeline. Sometimes global defaults aren't the best solution as they'll affect all your timelines in that project!


See the Pen rNvKVZv?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 4
Link to comment
Share on other sites

Oh no, it was a typo! This is now my second GSAP forum post with a camelcase mistake, eek. 

Thanks so much @mvaneijgen for figuring it out and explaining your debugging process. Doh!

And also thanks @Cassie - your example is certainly much cleaner and easier to read than mine, meaning I could come back to it and make sense of it more easily in future. Good to hear from the pro's not to worry too much about it. I've chosen not to use the global defaults for scroll trigger as I do have other scroll trigger timelines on the page that should have different behaviour.

Final working article now being put into website. Thanks again to you both!

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.
×