Jump to content
Search Community

Nest animation in section of Looped "Scrolling" Section Transitions - ScrollTrigger

LenaPont test
Moderator Tag

Recommended Posts

Hi there,

I'd like to make a website with scrub animation that loops.  I have 3 questions.

 

Q1.

I used the demo on Code Pen and it got very close, but there are some problems.

I want to have  animations in each section that also scrub.  It's working but a section moves to next before completing the animation in a current section.

When I changed the height of window, end position of ScrollTrigger for an animation if the current position to end, it messed up and didn't work. 

Do you have a solution?

 

Q2.

I made a master timeline and added timeline of each section.  It seems snap to labels are not working.  Doesn't snap work for nested timeline?

 

Q3.

Maybe related to Q2.  I made navigation links for each section (under the ScrollTrigger logo), but I got the error like below and labelToScroll doesn't work.
 

Quote

 

gsap-latest-beta.min.js?r=5426:10 Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': The provided value is not of type 'ScrollToOptions'.


 

It worked when I made one long timeline instead of adding short timelines to one master timeline.

Making one timeline is the only solution?

 

Hope someone would respond soon...

Thank you.

See the Pen yLjLJLG by lena-pont (@lena-pont) on CodePen

Link to comment
Share on other sites

Hi there!


Apologies for the lack of response so far, but it looks like likely that people are struggling to help with this question. Here are some tips that will increase your chance of getting a solid answer:
 

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • A minimal demo - if possible, using no frameworks, with minimal styling, only include the code necessary to show the issue.

 

As for Q3, it sounds like you forgot to load ScrollToPlugin. 

 

I'd strongly recommend simplifying your demo as much as possible - maybe just one or two sections with a simple <div> spinning or moving to illustrate what you want to achieve. 

Link to comment
Share on other sites

Thank you for the response.

I maybe my explanation wasn't enough.

I customized the original demo of looping and added simple animations of scale down text and fading in photos in each <panel>.

What I expect is see all animations while the scrolltrigger to <body> is looping and go back to the beginning.  Now, the scrub animation in the blue panel is not completed because the red panel comes in before its end.

I trid changing the height of each panels and pinned, but that didn't work.

Link to comment
Share on other sites

The biggest problem is that you're populating a master timeline with various animations that may vary in length, but you're setting up ScrollTriggers that setSection() at equal intervals. Those won't match up. For example, if there are 4 sections but your first section's animation takes up 50% of the master timeline's duration (which you're scrubbing, linked to the body's scroll position), it'll switch sections at 25% (because each of the 4 sections takes up 25%). You'd need to work out the logic for how you're structuring things. Like calculate the ratio of each sub-timeline's duration to the overall duration and set up your ScrollTrigger start/end values accordingly. 

 

It also looks like you're trying to go to labels that don't exist. You can't do this:

let master = gsap.timeline();
let child = gsap.timeline();
child.addLabel("myLabel", 1);
master.add(child);

master.seek("myLabel"); // <- doesn't exist! It's in the child, not master.

So your snapping to labels won't work since there aren't any labels in the master timeline. 

 

I hope that helps get you moving in a good direction. 👍

Link to comment
Share on other sites

Hi Jack,

Thank you.

Your suggestion was clear.

I tried, but I couldn't figure out how to pass setSection() to sub-timeline's duration...😭

 

About labels, I added labels to master and that worked😄

const masterTl = gsap
  .timeline({ paused: true })
  .addLabel("nav0")
  .add(blueTl())
  .addLabel("nav1")
  .add(redTl())
  .addLabel("nav2")
  .add(orangeTl())
  .addLabel("nav3")
  .add(purpleTl())
  .addLabel("nav4")
  .add(greenTl());

 

Link to comment
Share on other sites

I think this demo is better to ask questions.

See the Pen abGbZgJ by lena-pont (@lena-pont) on CodePen

 

When I loop back to top I don't want to see the animation reversing.  I want to see the first frame immediately.

Also, I want a smooth transition from the end to the start because the scroll pushes me back to the end if the velocity is not enough.   Is it something I should work on snap?

 

I found a solution here!  Thank you!

 

 

Link to comment
Share on other sites

5 hours ago, LenaPont said:

I tried, but I couldn't figure out how to pass setSection() to sub-timeline's duration...😭

You could grab each one before you add() it to the master, save its duration(), then after they're all added you can just loop back through those durations and divide them by the total duration of the master, and there are your ratios. 

 

5 hours ago, LenaPont said:

About labels, I added labels to master and that worked😄

 

Good job! 👏

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