[add truck with the road and animate the truck on scroll]

Hi there guys,

 

I am very confused. I have a design with lots of lines(roads) which are connected to sections through out the page like on the image on this image given below. Am i able to add those like exactly on the picture with help of gsap and animate the truck on them while scrolling ? 

 

 

[Scroll Trigger pinning height problem]

Hi there. 

As you can see on my Codepen. I wanted to pin all of my sections but without having pinSpacing. but unfortunately the spacing gets broken and makes it worst. Can you please help.

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

[Animating Timeline horizontally]

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. 

[Animating Timeline horizontally]

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 ? 

[Animating Timeline horizontally]

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

I checked on the site and it was very expensive.

[Animating Timeline horizontally]

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

[Animating Timeline horizontally]

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 ?

[Animating Timeline horizontally]

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 ? 

[Animating Timeline horizontally]

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

[ScrollTrigger scrolling to top, animation disappears the content]

16 minutes ago, anton123 said:

Add "once: true" to your scrollTrigger. The elements will stay visible if you scoll back up

 

scrollTrigger: {
    trigger: ".section-second",
    pin: true,
    start: "top top",
    end: "+=500",
    scrub: 1,
    once: true
}

 

Thanks, that was what i was looking for but unfortunately the height of the animation stays  keeping a huge height between the section. How do we get that to normal ? 

[ScrollTrigger scrolling to top, animation disappears the content]

Hi, 

 

I am very new to this amazing animation platform. I am having an issue which i have not been able to solve. As you can see on my codepen link, the animation when scrolling to the top, The content disappears with the similar animation. I don't feel that would be a great showcase to show it to my client. Can you please help ? 

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