Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
nag.shankar6

Multiple GSAP timelines with scrollTrigger

Recommended Posts

I'm new to Greensock and it's amazing, i decided to use GSAP with scrollTrigger plugin for one of my project, my question is - how do we use multiple timelines with scrollTrigger plugin, i have done it like below and it works, is there any better way to do it
    

let sections = gsap.utils.toArray(".big-row");

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".horizontal-container",
    pin: true,
    scrub: 1,
    snap: 1 / (sections.length - 1),
    end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth
  },
  })
tl.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none"
});

let tl2 = gsap.timeline({
scrollTrigger:{
    trigger:'.present-img',
    start:"top 80%",
    end:"bottom 10%",
    markers:true,
    scrub:true,
    toggleActions:"restart pause reverse none"
  }
})

tl2.fromTo('.present-img',{x:-400},{x:0})

 

Link to comment
Share on other sites

  • nag.shankar6 changed the title to Multiple GSAP timelines with scrollTrigger

Hey there @nag.shankar6!

 

Welcome to the forums. GSAP code is very tied in to UI so it's hard to advise without seeing what you're trying to make, how your markup is structured and what your CSS looks like!

Just from a GSAP perspective, this looks perfectly fine.  

A few notes,

 

You don't need scrub and toggleActions, they're used for conflicting behaviours - so just choose one. Either a scrubbed animation or an animation that's controlled at different points.

- Scrub through animation as you scroll down and scrub in reverse on the way back up.

- Use toggleActions to determine whether to play/reverse/restart/pause the animation as you scroll in or out of the animation area.

 

You only need a timeline if you're sequencing animations. If you just have one tween you can add the scrollTrigger in the tween instead.
 

gsap.to(elem, {
 x:200,
 scrollTrigger: {
   // stuff
 }
})


Happy tweening!

  • Like 2
Link to comment
Share on other sites

Hey @Cassie ,
Thank you for the response! I've noted the above points.
My question was i'm using GSAP Timeline + scrollTrigger twice to each 2 different things, in the above code, once i use it for Horizontal scrollling and again using it for scroll to reveal kind of animation. 
 

let tl = gsap.timeline({
  scrollTrigger: {
    //using this for horizontal scrolling
  }
}) 
let tl2 = gsap.timeline({
scrollTrigger:{
    //using this for scroll reveal kind of animation
  }
})

Is it okay to use multiple timelines(with scrollTrigger) OR is there a way to combine both into single block of code?
 

Link to comment
Share on other sites

Yep.

Multiple timelines with scrollTrigger are fine. Make as many as you like!

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