How can I optimise my timeline, to have less code to write ?

[yousoumar 5 Likes (Newbie)]

Hi guys ! Hope you are doing fine !

 

I attached this codepen where I am pinning and animating some project cards. It is working fine, but I have way more projects and I was wondering if can avoid having to write the same pattern for all of them. Also, their number (the projects) may change frequently.

 

Thanks for your time !

See the Pen mdBNXob by yousoumar (@yousoumar) on CodePen

[Cassie 5,649 Likes (Superhero)]

Hey there,

 

Sure thing, you can use a stagger and set a dynamic end point for the trigger. 

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

 

Hope this helps! ✨

[yousoumar 5 Likes (Newbie)]

Thank you so much @Cassie ! Tough the thing is, I wanna animate some elements inside each project card before going to the next one, don't know if it is possible. Here is the complete  timeline for a project. 

      timeline
        .from(
          ".project",
          {
            autoAlpha: 0,
          }
        )
        .from(".project .image", {
          autoAlpha: 0,
          y: -100,
        })
        .from(".project .description", {
          autoAlpha: 0,
        })

 

[yousoumar 5 Likes (Newbie)]

14 minutes ago, Cassie said:

Hey there,

 

Sure thing, you can use a stagger and set a dynamic end point for the trigger. 
 

 

 

Hope this helps! ✨

Thank you so much @Cassie ! Tough the thing is, I wanna animate some elements inside each project card before going to the next one, don't know if it is possible. Here is the complete  timeline for a project. 

 timeline
        .from(
          ".project",
          {
            autoAlpha: 0,
          }
        )
        .from(".project .image", {
          autoAlpha: 0,
          y: -100,
        })
        .from(".project .description", {
          autoAlpha: 0,
        })

 

[Cassie 5,649 Likes (Superhero)]

Oh ok! In that case you can use a loop to iterate around and add each project to a global timeline. ✨

 

let projects = gsap.utils.toArray('.project')
let timeline = gsap.timeline({
  //scrolltrigger
})

projects.forEach((project)=> {
  
 let image = project.querySelector('.image')
 let description = project.querySelector('.description')
 
 timeline
  .from(project,{autoAlpha: 0})
  .from(image,{autoAlpha: 0,y: -100})
  .from(description, {autoAlpha: 0})
  
})

 

[yousoumar 5 Likes (Newbie)]

You saved my life @Cassie. I created that cool pinned timeline that I was about to abandon because of the number of my project cards. I tried doing a loop but it was with template string to inject data at some places and it didn't work. Thank you so much and have a great day !