Jump to content
Search Community

ScrollTrigger different sections durations

Sj24 test
Moderator Tag

Recommended Posts

Hey guys, i am trying to make an x amount of sections and i want each section to have its animation. The only thing is that i don't know how to adjust the height (or duration) for each section because i want each section's duration to vary. 

 

For example, in the codepen i provided i'd like:

1. for the first section to scroll 2000px , during that time the svg elements will move at a different speed upwards creating a parallax effect

2. for the second section the svg camera is coming up on top of the first section and zooming in its squared display (by scaling up the camera), at which point when the display's border touches the screen's viewport width the third section will appear from the center. So its duration should be longer than the first section's duration.

 

Basically i want absolute control over the entrance and exit points of each section as well as their duration.

I messed around with the start and end values of each section quite a lot and i can't wrap my head around it. Any help is greatly appreciated!

See the Pen abjWBqw by vaggelis-kapetanakis (@vaggelis-kapetanakis) on CodePen

Link to comment
Share on other sites

Hi @Sj24 and welcome to the GreenSock forums!

 

I'm having a few issues following your example as I think is far too complicated and unclear.

 

For example you have all this instances:

gsap.to(".svg-bg1", {
  ease: "none",
  scrollTrigger: {
    scrub: 1
  },
  y: -2 * yOffset
});

gsap.to(".svg-bg2", {
  ease: "none",
  scrollTrigger: {
    scrub: 1
  },
  y: -5 * yOffset
});

gsap.to(".svg-bg3", {
  ease: "none",
  scrollTrigger: {
    scrub: 1
  },
  y: -4 * yOffset
});

gsap.to(".svg-bg4", {
  ease: "none",
  scrollTrigger: {
    scrub: 1
  },
  y: -3 * yOffset
});

gsap.to(".svg-bg5", {
  ease: "none",
  scrollTrigger: {
    scrub: 1
  },
  y: -2 * yOffset
});
gsap.to(".amaksi", {
  ease: "none",
  scrollTrigger: {
    scrub: 1
  },
  y: -4.5 * yOffset
});

gsap.to(".hero-h1", {
  ease: "none",
  scrollTrigger: {
    scrub: 1
  },
  y: -3 * yOffset
});

gsap.to(".hero-p", {
  ease: "none",
  scrollTrigger: {
    scrub: 1
  },
  y: -3 * yOffset
});

Each one of those has it's own ScrollTrigger instance. You should keep all the animations for the background and the camera in one timeline and perhaps the purple background as well (at the end of the timeline). Also keep in mind that you are using elements with absolute positions which can create a few issues when it comes to the layout and how is animated.

 

I strongly recommend you to get your animation sequence working in the way you intend first. For that completely remove ScrollTrigger from the equation. It might sound counter-intuitive but is the best way to get a fully working HTML layout that looks and works the way you need. Then you create your animations. Once your animations are working in the way you want, add ScrollTrigger as it should be the last step in the whole process.

 

Finally there is a lot of code in your example (HTML/CSS/JS) and unfortunately we don't have the time resources to provide general solutions to complex setups or request lists. Let us know if you have more questions.

 

Happy Tweening!

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