Question

178

GSAP ScrollTrigger - Create a Timeline for Every Section

rated 0 times [ 183] [ 5] / answers: 1 / hits: 6491 / 4 Years ago, thu, november 5, 2020, 12:00:00

I have a "Projects" page where I'm showcasing project pieces and I want each one to fade in on scroll. I'm trying to implement a timeline for each project with the following HTML and JavaScript:

<!-- Page contains multiple projects that follow this template -->

<div id="project-trigger">

     <div class="project">

          <img class="project-image" src="image1" alt="">

          <div class="description">

               <h3 class="project-text">Lorem Ipsum</h3>

               <p class="project-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga impedit numquam modi accusamus.</p>

         </div>

     </div>

</div>

let projectTrigger = document.querySelectorAll('#project-trigger');



projectTrigger.forEach(project => {

    let timeline = gsap.timeline({

        scrollTrigger:{

            trigger:"#project-trigger",

            start:"center bottom",

            ease:"power2.easeOut",

            toggleActions: "play none none reverse",

        }

    })



    timeline.from(".project-image",{

        x:-200,

        opacity:0,

        duration:0.5

    }).from(".project-text",{

        x:200,

        opacity:0,

        duration:0.5,

        stagger:0.2

    }, "-=0.5")

}

)

I want the images to fade in from the left, and the text to fade from the right. At the moment, it's not working - the images fade in halfway then stop, and the text doesn't scroll in at all.

Is it possible to implement what I'm after? And if so, where am I going wrong?

CodePen: https://codepen.io/jacobcollinsdev/pen/jOrpKja?editors=1010

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brodyfrancisi

Add To Favorites

Follow

Total Points: 1

Total Questions: 102

Total Answers: 89

Location: Marshall Islands

Member since Mon, May 31, 2021

3 Years ago

brodyfrancisi questions

1 How to wait until React in an iframe rendered it's content

Mon, Feb 21, 22, 00:00, 2 Years ago

1 Is it good way to throw error from service in nestjs like it:

Wed, Jan 12, 22, 00:00, 2 Years ago

1 Mongoose TypeScript ObjectId casting - Type 'string' is not assignable to type 'Condition< ObjectId | undefined>'

Fri, Oct 1, 21, 00:00, 3 Years ago

1 event.target.value as a number?

Mon, Apr 5, 21, 00:00, 3 Years ago

1 Node js debugging not working in Visual Studio code (year 2020)

Thu, Jul 2, 20, 00:00, 4 Years ago

View All

answered 4 Years ago kareem · Accepted Answer

Your HTML is invalid. You can't have multiple elements with the same ID. If you need to do something like that, you should use a class instead.

You're also making one of the most common ScrollTrigger mistakes: using generic selectors when you want to use scoped ones. I write more about how to do this in my article about animating efficiently.

Fixing those errors, you should get something like this:

const projectTriggers = document.querySelectorAll(".project-trigger");



projectTriggers.forEach(addTimeline);



function addTimeline(project, index) {

  const image = project.querySelector(".project-image");

  const text = project.querySelector(".project-text");

  

  const timeline = gsap.timeline({

    scrollTrigger: {

      trigger: project,

      start: "center bottom",

      ease: "power2",

      toggleActions: "play none none reverse"

    }

  })

  .from(image, {

    x: -200,

    opacity: 0,

    duration: 0.5

  })

  .from(text, {

    x: 200,

    opacity: 0,

    duration: 0.5,

    stagger: 0.2

  }, "-=0.5");

}

Demo

To get rid of the flash of unstyled content at the start, see this post.