Jump to content
Search Community

LenaPont

Members

  • Posts

    8

  • Joined

  • Last visited

 Content Type 

Posts posted by LenaPont

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

    in GSAP

    Posted

    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!

     

     

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

    in GSAP

    Posted

    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());

     

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

    in GSAP

    Posted

    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.

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

    in GSAP

    Posted

    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

×
×
  • Create New...