Jump to content
Search Community

ScrollTrigger, batch and timeline - how to consider each to accomplish this task

edmundsecho test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

I'm new to GreenSock and combining/coordinating animations.  gsap is a pleasure to work with; I've been really productive with "one-off" animations with and without using ScrollTrigger.

 

The elements

I have 3 elements (img and svg), all set to the same size, positioned on top of each other on the same location on the screen.  Two of them start at a large 4x scale. One of the elements is visible at scale 1 to start. 

 

While the user scrolls for 900px, the following is to take place, "in place" (i.e., scrolling drives the animation using scrub, but does not appear to scroll per se).

 

The task

I'm after the following, in place:

 

v ~~~~~~  scrolling 900px   ~~~~~~~~~~~~v

------- hide element 1

     ---------------------------------------------------- scale down to 1  elements 2 & 3

           --------- show element 2 (a svg)

                   ----------- run the svg animation

                                   ---------- hide element 2

                                           ------------- show element 3

 

Code thus far

 

The  scroll trigger...

 

gsap
  .timeline({
    scrollTrigger: {
      trigger: "#header-trigger",
      start: "top top",
      end: "+=900",
      scrub: 1,
      markers: true,
      onEnter: () => console.log("header-enter"),
      onLeave: () => console.log("header-leave"),
      id: "intro",
    },
  })

  .to(".element-1", { opacity: 0, })

 

... and the animation for element-2 (a svg)

 

const element2Animation = gsap
  .timeline()
  .from(".top-box", { y: -1000 }, 0)
  .from(".bottom-box", { x: 1000 }, 0)
  .from(".right-box", { x: -1000 }, 0)
  .from(".left-box", { y: 1000 }, 0)
  .from(".context-box", { autoAlpha: 0 })
  .from(".grid", { autoAlpha: 0 });

 

I'm stuck on how to add to the timeline that enables a combination of sequence (e.g., change scale of elements 2 & 3 following my taking element 1 opacity to 0) and "in parallel" with animations that run together (scale both elements 2 & 3) while running the show/hide sequence of the elements.

 

Thank you in advance to anyone with guidance on how to think through this.

 

- E

Link to comment
Share on other sites

1 hour ago, edmundsecho said:

I'm stuck on how to add to the timeline that enables a combination of sequence (e.g., change scale of elements 2 & 3 following my taking element 1 opacity to 0) and "in parallel" with animations that run together (scale both elements 2 & 3) while running the show/hide sequence of the elements.

I may not be understanding your question correctly, but you can have total control of the timing of things in the timeline by using the position parameter:

 

If you still need some help, please provide a minimal demo - that will significantly increase your chances of getting a good answer :)  

 

1 hour ago, edmundsecho said:

gsap is a pleasure to work with; I've been really productive with "one-off" animations with and without using ScrollTrigger.

Very glad to hear it! 🎉

Link to comment
Share on other sites

Thank you for your input.  I've made some good progress using a series of nested timelines.  I believe there is one missing understanding on my part.

 

See the Pen oNwPdbo by EdmundsEcho (@EdmundsEcho) on CodePen

(the console prints out what is going on including the "bug").

 

I understand how to get two timelines to run in parallel using the timeline().add(tlA).add(tlB, "<") syntax.  I also know that to have each *end* together, that the duration values need to be the same.

 

However, what if the duration is set using a scrollTrigger?... per the following:

 

gsap
  .timeline({
    scrollTrigger: {
      trigger: "#header-trigger",
      start: "top top",
      end: "+=900",
      scrub: 1,
      markers: true,
      onEnter: () => console.log("header-enter"),
      onLeave: () => console.log("header-leave"),
      id: "intro-scene",
    },
  })
  .add(master)
  .add(zoomOut, "<");

 

... is it really a matter of setting the trigger to a const to then reference the trigger in *both* the master and zoomOut timelines, separately?  What's a little confusing here is that the master timeline clearly takes on the length of however long it takes to scroll 900px, what prevents the zoomOut from doing the same?

 

... or is this where the scrollTrigger.batch()  comes in handy?

 

PS: Apologies for not getting this up and running in code pen, I'm just not that efficient as of yet.

Link to comment
Share on other sites

  • Solution

I may not be understanding you correctly, but it seems to me like you're assuming that the showHideTrack and zoomOut animations are exactly the same duration but they're not. showHideTrack is 2 seconds whereas zoomOut is 0.5 seconds. You can either adjust your timings or just force the duration to match as you insert it like:

 

  .add(showHideTrack)
  .add(zoomOut.duration(showHideTrack.duration()), "<");

Note that when you alter the duration of a timeline, it simply adjusts the timeScale accordingly. There are important reasons for that which I can explain if you request it (or you can just trust me) :)

 

And yeah, you don't set durations with a ScrollTrigger. When you have scrub: true, it simply makes the timeline fit within the ScrollTrigger's area. See the docs explanation

 

Is this more like what you wanted?: 

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

  • Like 1
Link to comment
Share on other sites

5 hours ago, GreenSock said:

I may not be understanding you correctly, but it seems to me like you're assuming that the showHideTrack and zoomOut animations are exactly the same duration but they're not.

 

Your observation is spot-on.  I did not understand how the timelineS would be derived when ultimately set by the user scrolling for whatever "space" exists between the start and end of the scrollTrigger.  The 2 lines of code provided was the missing ingredient.  Thank you!!

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