Jump to content
Search Community

alal111

Members

  • Posts

    12

  • Joined

  • Last visited

 Content Type 

Posts posted by alal111

    I want car that moves along path and show show text on certain points

    in GSAP

    Posted

    12 hours ago, Rodrigo said:

    Hi,

     

    The reason for that is because in those examples the element that follows the path, soto speak, is a wrapper for the element that rotates. So in Cassie's example that arrow is wrapped around a <g> tag. That particular <g> tag is the one that follows the path, the arrow is just a free loader that goes for the ride and just rotates according to the scroll direction :D.

     

    So in your case you have to wrap your car around an element and tinker a bit with your code and CSS. Here is a fork of your codepen, you can see the red box around the car is the one that is attached to the path:

     

     

     

    Hopefully this helps.

    Happy Tweening!

    Thank you very much, it helped a lot

    MotionPathPlugin change starting point of svg path

    in GSAP

    Posted

    5 minutes ago, mikel said:

    Hey @alal111

     

    On the one hand, it is much easier to combine all the elements in the SVG.
    And: a path can easily be coded by hand.

     

     

     

     

    And for the scroll-effect you could use GSAP ScrollTrigger.

     

    Happy tweening ...

    Mikel

     

    thank for reply, but even in your example paper moves from conus, i need it like when i scroll down it moves to conus, i tried to use rotate3d on parent but then paper rotates too, i just need your exact example but paper moves in opposite direction

    MotionPathPlugin change starting point of svg path

    in GSAP

    Posted

    30 minutes ago, Cassie said:

    Heya! - So that path it's following is a shape with a stroke all the way around it.

    The toilet paper is following the stroke around the shape.
     

     

     

    You'll need to redraw that path so that it's a single stroke without a fill.

    Shout if that doesn't make sense and I'll find you an article or something :)

    where can i create something like this?

    MotionPathPlugin change starting point of svg path

    in GSAP

    Posted

    18 minutes ago, Cassie said:

    Heya! - So that path it's following is a shape with a stroke all the way around it.

    The toilet paper is following the stroke around the shape.
     

     

     

    You'll need to redraw that path so that it's a single stroke without a fill.

    Shout if that doesn't make sense and I'll find you an article or something :)

    thank you very much for quick reply) 

    but i dont really know how to create such a thing)

    Animate one element with multiple scrollTrigger tweens

    in GSAP

    Posted

    1 hour ago, akapowl said:

    Hey @alal111

     

    You can easily control how to play non-scrubbing tweens/timelines attached to a ScrollTrigger with toggleActions

     

    toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

     

    ...from the ScrollTrigger docs.

     

     

    Having ScrollTriggers set up on individual tweens of a timeline (as you have in your latest pen) is one of the most common ScrollTrigger mistakes btw. Since you want your individual animations to trigger in different spots you would have to set up different ScrollTriggers for each of those animations. 

     

    And since you are tweening on the same properties of the same element multiple times, you will want to set immediateRender: false to any later tweens on those properties of that element (not doing so is another one of the most common ScrollTrigger mistakes).

     

    That could maybe look something like this

     

     

     

     

     

     

    I also used a fromTo tween for the second ScrollTrigger here to make sure it tweens from the first little rect to the second every time and it works fine, when you scroll slowly. The problem is though, since the distance between those ScrollTriggers is not really the biggest, if you scroll fast enough, you will see some jumping - which is to be expected as you would have the second ScrollTrigger take control over tweening the element when the first tween maybe isn't even finished.

     

    That is a general problem with time-based animations (on the same element) triggered on scroll (in different places) which there is not really a solution for - except if you would consider blocking the scroll for the user for a certain time - but then again that would be a very bad user experience. So actually you might want to consider re-thinking how you want things to be played here - unless somebody has an obvious solution to that, that I just didn't think of.

     

     

    i have one more question what to do if i want my first point be higher then center of window? if i do it now it jumps to first point without scroll

    Animate one element with multiple scrollTrigger tweens

    in GSAP

    Posted

    36 minutes ago, akapowl said:

    Hey @alal111

     

    You can easily control how to play non-scrubbing tweens/timelines attached to a ScrollTrigger with toggleActions

     

    toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

     

    ...from the ScrollTrigger docs.

     

     

    Having ScrollTriggers set up on individual tweens of a timeline (as you have in your latest pen) is one of the most common ScrollTrigger mistakes btw. Since you want your individual animations to trigger in different spots you would have to set up different ScrollTriggers for each of those animations. 

     

    And since you are tweening on the same properties of the same element multiple times, you will want to set immediateRender: false to any later tweens on those properties of that element (not doing so is another one of the most common ScrollTrigger mistakes).

     

    That could maybe look something like this

     

     

     

     

     

     

    I also used a fromTo tween for the second ScrollTrigger here to make sure it tweens from the first little rect to the second every time and it works fine, when you scroll slowly. The problem is though, since the distance between those ScrollTriggers is not really the biggest, if you scroll fast enough, you will see some jumping - which is to be expected as you would have the second ScrollTrigger take control over tweening the element when the first tween maybe isn't even finished.

     

    That is a general problem with time-based animations (on the same element) triggered on scroll (in different places) which there is not really a solution for - except if you would consider blocking the scroll for the user for a certain time - but then again that would be a very bad user experience. So actually you might want to consider re-thinking how you want things to be played here - unless somebody has an obvious solution to that, that I just didn't think of.

     

     

    Thank you very much, you are the best! it works exactly how i wanted

    • Like 1
×
×
  • Create New...