Animating Timeline horizontally

[ud907 0 Likes (Newbie)]

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

[ZachSaucier 7,130 Likes (Superhero)]

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

 

Here's a similar demo:

See the Pen mdyxvGX by GreenSock (@GreenSock) on CodePen

[mikel 4,774 Likes (Superhero)]

 

Just another approach

 

See the Pen oNxYxor?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[ud907 0 Likes (Newbie)]

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 ? 

[mikel 4,774 Likes (Superhero)]

Hey @ud907,

 

YES you can.

 

Here is a simple concept

 

See the Pen NWNbaQw?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy learning ...

Mikel

[ud907 0 Likes (Newbie)]

30 minutes ago, mikel said:

Hey @ud907,

 

YES you can.

 

Here is a simple concept

 

 

 

 

Happy learning ...

Mikel

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 ?

[mikel 4,774 Likes (Superhero)]

 

Hey,

 

I've never used Sketch.

The example is 'handwritten'. If you look at the coordinates of the viewBox and the elements,

you will notice how comprehensible it is and that it can be varied easily.
A good tutorial for How to hand code SVG ...

 

Just do it ...

Mikel

[ud907 0 Likes (Newbie)]

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

[mikel 4,774 Likes (Superhero)]

Hey,

 

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

 

var action = gsap.timeline({
  scrollTrigger:{
    trigger: "section",
    pin:true,
    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 ...

Mikel

 

[ZachSaucier 7,130 Likes (Superhero)]

You might be interesting in using GSAP's defaults  

 

[mikel 4,774 Likes (Superhero)]

 

Nobody is perfect ...    I'm still learning.

 

Thanks, ZACH,  for the hint.

[ud907 0 Likes (Newbie)]

@mikel @ZachSaucier
Draw svg, I cannot use it for free ? 

I checked on the site and it was very expensive.

[ZachSaucier 7,130 Likes (Superhero)]

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. 

[ud907 0 Likes (Newbie)]

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 ? 

[ZachSaucier 7,130 Likes (Superhero)]

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:

 

 

[mikel 4,774 Likes (Superhero)]

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

Mikel

[ud907 0 Likes (Newbie)]

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

Mikel

Thanks. Will figure a way out.