Jump to content
GreenSock

Vander

Stop scrollTrigger, trigger some functions and run scrolltrigger again

Recommended Posts

Hi there,

 

I've found a demo from Gsap working with scrollTrigger, but I wanted to change some stuff which i've not been able to.

 

I want to achieve that when i scroll, some sections appear from some side (previously indicated) and once pinned, run a function (if there's hidden text) that fades out the actual visible text and fades in the next hidden text, and same with the third hidden text. Once done with the third text, continue with scrolling sections... 

Should i create a scrollTrigger for every section then? Is it possible to achieve it?

 

I've been trying to do it with the codepen attached... And also i viewed something similar with locomotiveScroll, but i'd like to do it with only scrolltrigger

 

Many thanks

See the Pen WNJEYLO?editors=0010 by EricCV (@EricCV) on CodePen

Link to comment
Share on other sites

The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

I don't know where your orange panel is hiding, but this is what I would do. Just add the animation to the timeline when you want them to happen and when you're happy with the animation turn ScrollTrigger back on.

 

See the Pen oNdpybg?editors=1010 by mvaneijgen (@mvaneijgen) 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.
×