mikel
-
Posts
2,157 -
Joined
-
Last visited
-
Days Won
71
mikel's Achievements
-
Hey @hiba Welcome to the GreenSock Forum. There are many paths that lead to the goal. Just try something and show us it in a small CodePen. A small case says more than a thousand words. Then we can better understand what you want to achieve. Happy tweening ... Mikel
-
Hey @JJJ, Perhaps you mean such effects that you can achieve with GSAP.observe. https://codepen.io/mikeK/pen/KKZKWKj/14611e829c8a93a47c4b6f3ad826d101?editors=0110 Happy observing ... Mikel
-
Hey @krunal, It is not easy to understand exactly what you want. In this example, all elements are in one SVG for easier handling of the relationships between them. Take a detailed look at the process and code and try to understand what is happening and when. Of course, there are always several alternatives as to how a process should look and how it can be structured. https://codepen.io/mikeK/pen/oNppZqm?editors=1010 Happy tweening ... Mikel
- 10 replies
-
- 2
-
-
- svg
- scrollmagic
- (and 2 more)
-
Hey @krunal, Then split e.g. the motionPath animation (start, end). And the change part starts a little later after the end of the first motion part. https://codepen.io/mikeK/pen/JjMrLeZ??editors=1010 Happy scrolling ... Mikel
- 10 replies
-
- 3
-
-
- svg
- scrollmagic
- (and 2 more)
-
Hey, This could be an alternative solution. Move the SVG so that the 'moving point' remains at the same place of viewport. The basic animation 'moving point' has a duration of 1 sec. Adjust the desired further animations in terms of duration and positioning (helper: ScrollTrigger progress). https://codepen.io/mikeK/pen/MWrELvR?editors=0010 Happy scrolling ... Mikel
- 10 replies
-
- 3
-
-
- svg
- scrollmagic
- (and 2 more)
-
Hey @Hysteresis, You should coordinate line draw and scroll movement also so that the course of your green line (the tip) does not run out of the viewport, is always in the picture. Here's an example ... https://codepen.io/mikeK/pen/MWoaXjV/13e3ffd92460b9cd26b1e5f793b640f8?editors=0110 Happy scrolling ... Mikel
-
Hey, The GSAP ScrollTrigger could offer another kind of 'helper'. It offers onUpdate the current progress = 'position of motionPath'. And that for any desired on the path. https://codepen.io/mikeK/pen/PoEmJyY??editors=1100 Happy helping ... Mikel
-
Hey @Dennyno, Try it step by step. https://codepen.io/mikeK/pen/QWOBXBL Happy opening ... Mikel
-
Fascinating what you can do with arrays. I've learned something. https://codepen.io/mikeK/pen/ExoNwdJ?editors=1010
-
Hey @bannerboy, Welcome to the GreenSock Forum. Maybe I don't understand your intention correctly, it would definitely work that way. https://codepen.io/mikeK/pen/KKZNvbN Happy tweening ... Mikel
-
Hey CARL, I was fascinated by the short code and didn't check it! Thank you. Mikel
-
Hey @mjray, Take a good look at the code. Little but effective. https://codepen.io/mikeK/pen/WNdGbgR Happy tweening ... Mikel
-
Hey @codanux, You could also use one forEach function (for both sections). And function based values combined with invalidateOnRefresh:true for the scrollTrigger. I like to test / choose the speed with appropriate relative values for the parameter 'end'. https://codepen.io/mikeK/pen/RwxGNZz Happy tweening ... Mikel
-
Hey @Istiak Hossain Tushar Does this example match your ideas? https://codepen.io/mikeK/pen/ZEvOmeb EDIT: The example has been exchanged! Happy tweening ... Mikel
-
Wraps have been more on my menu so far. Thank you Blake. P.S. Change UP and DOWN.
