Jump to content
GreenSock

yousoumar

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

Go to solution Solved by Cassie,

Recommended Posts

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

Link to comment
Share on other sites

  • yousoumar changed the title to How can I optimise my timeline, to have less code to write ?

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,
        })

 

Link to comment
Share on other sites

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,
        })

 

  • Like 1
Link to comment
Share on other sites

  • Solution

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})
  
})

 

  • Like 2
Link to comment
Share on other sites

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 !

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