Jump to content
Search Community

Animating Timeline horizontally

ud907 test
Moderator Tag

Recommended Posts

Hi there,

I have a website, where i have used gsap animation over the page. I am now adding a new section which will have horizontal timeline. I want to add animation on it. I was just wondering if there is any easy way with gsap so that i can connect the circle with diagonal line from  1-2 and 2-3 and 3-4 and so on with the animation pinning the screen. 


See the Pen wvGoaOq by umanga (@umanga) on CodePen

Link to comment
Share on other sites

14 hours ago, ZachSaucier said:

Hey ud907. DrawSVG is perfect for this sort of thing.


Here's a similar demo:



This is great, Thanks a lot but by any means can we remove the previous and the next and add the text on top of the dots also control it within the scroll ? 

Link to comment
Share on other sites

30 minutes ago, mikel said:

Hey @ud907,


YES you can.


Here is a simple concept





Happy learning ...


Wow! Thanks a bunch @mikel

This is really great. I am really loving Gsap and learning a lot from you guys. Great community! 

and last thing, is there a easy way to sketch those lines and circle location ?

Link to comment
Share on other sites

Thanks a lot @mikel
I was able to use sketch and make the design out of it and animate it. I got an issue with loading the animation. Like on the codepen here below. The first circle load perfectly with its text but the remaining circle text and numbers loads up only at the last. How can i make the animation happen for text and circle and the number on the same time ? 


Also any suggestions on responsive ? 


See the Pen MWybOXd by umanga (@umanga) on CodePen

Link to comment
Share on other sites



You need a stagger tween for all three elements that starts at the same time.


var action = gsap.timeline({
    trigger: "section",
    scrub: true,
    start: "top top",
    end: '+=1000px'
  }, defaults:{ease:'none'}})

.to(".star01, .text01, .ltext01", {autoAlpha:1, duration:0.2})
.from(".path", {drawSVG:0, duration:1, stagger:1},0.2)
.to(".star02", {autoAlpha:1, duration:0.2, stagger:1},1.1)
.to(".text02", {autoAlpha:1, duration:0.2, stagger:1},1.1)
.to(".ltext02", {autoAlpha:1, duration:0.2, stagger:1},1.1)
.to({},{duration:3}) // only a little pause before unpinning


Go on ...



  • Like 1
Link to comment
Share on other sites

5 minutes ago, ZachSaucier said:

DrawSVG is one of our several Club GreenSock plugins, yes. Typically our customers find that it pays for itself literally in a matter of days (or weeks at the most). But if you’re not happy we’ll gladly issue a full refund. We’re passionate about having happy customers around here. 

I see. but the annually package is too expensive. I could get one but i am not sure if my client will like the design, need to show them first. Is there any way to use it other than in codepen ? 

Link to comment
Share on other sites

1 minute ago, ud907 said:

Is there any way to use it other than in codepen ? 

If you pay for it :) 


Keep in mind that you can use all of the Club GreenSock plugins on an unlimited number of projects if you buy a membership. To learn more about why we do this see this page:



  • Like 2
Link to comment
Share on other sites

On 8/21/2020 at 9:45 PM, mikel said:

Hey @ud907,


Perhaps you can present the effect using CodePen in Full Page View mode.
Otherwise I can only agree with ZACH, GSAP pays off: great performance also and especially here in the forum.


Good luck


Thanks. Will figure a way out. 

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