mikel

Hey @Altea, This case might help you: https://codepen.io/mikeK/pen/KKmdMdX?editors=1010 Happy tweening ... Mikel

Hey @Lolia Trafam, In combination with the MotionPathPlugin it could work like this: https://codepen.io/mikeK/pen/oRazzE or https://codepen.io/mikeK/details/rNMxePX/d08a34f0e4bca3bdb59e4b91ecdc6e75 Happy tweening ... Mikel

Hey, It's difficult to analyze something you can't see. If a case works in the CodePen, then it should also run live - unless you have made any changes or other influences there.

Hey @Saleem Beg, Sorry, I have not seen. You need some space to see the effect. body{ height:500vh; //e.g. } Happy tweening ... Mikel

Hey @mayyar Here is an alternative concept for the rotation. Is it roughly how you want to implement it? https://codepen.io/mikeK/pen/NWwRMgE Happy rotating ... Mikel

Hey @Saleem Beg, I can't find any elements with class '.fade-in' or '.from-right' ... in your HTML. So nothing can animate. Happy tweening ... Mikel

Just an alternative https://codepen.io/mikeK/pen/MWOeqPy?editors=1010

Hey @OSUblake, It depends what you want. objectBoundingBox This value indicates that all coordinates inside the <clipPath> element are relative to the bounding box of the element the clipping path is applied to. It means that the origin of the coordinate system is the top left corner of the object bounding box and the width and height of the object bounding box are considered to have a length of 1 unit value. So define your <clipPath> coords as you need them relative to the bounding box of the element. https://codepen.io/mikeK/pen/mdqEBjy??editors=1010 Happy bounding ... Mikel

Hey @Zoker, try a separate scrollTrigger for each element: gsap.utils.toArray('.fadein').forEach(function(part) { gsap.from(part, { scrollTrigger: { trigger: part, start: "center bottom", end: "bottom bottom", scrub: 0 }, opacity: 0 }); }); Happy tweening ... Mikel

Hey @embrion You could use gsap.delayedCall(3, () => vid.pause()); to pause the video. https://codepen.io/mikeK/pen/WNXwvRj??editors=1010 Happy tweening ... Mikel

Just a side-by-side-example of scrub and toggleActions. https://codepen.io/mikeK/pen/ZEaQgLB?editors=0010 Happy toggling ... Mikel

Hey @Arzou, A lot is possible. Be creative in concept and implementation. Here is a rough layout for a report of a small NGO. The larger the value, the slower the process: tt = 25000; // 'total time' in px of scrub animation (line 12). https://codepen.io/mikeK/pen/8911550a3b01adf215086bc42091e4f4?editors=1010 Happy tweening ... Mikel

Hey @Arzou, Here is a slider (based on GSAP Scrolltrigger) where the change is a 'bit more controllable'. https://codepen.io/mikeK/pen/mdqVENQ?editors=0010 Happy tweening ... Mikel

Hey @benoit, I like DRUMS! https://codepen.io/mikeK/pen/zYPvMQz Happy drum ... Mikel

Hey @subvikr, You can also tween an SVG line like this. (more to 'attr:{}' here) https://codepen.io/mikeK/pen/wvPKRmG Happy tweening ... Mikel

@Sunny Shah There are different ways. Here is a variant for a color change. https://codepen.io/mikeK/pen/GROpYbO Happy tweening ... Mikel

Hey MIKE790, You could define a start position: start: "top -30" Happy scrolling ... Mikel

Hey WEINDE, Try to build up the animation piece by piece, step by step. Take a close look at the positioning options (Positioning animations in a timeline). Then build the tweens: order, timings, distances, overlaps ... https://codepen.io/mikeK/pen/XWgMvGy?editors=1010 And then integrate the scroll trigger. Happy scrolling ... Mikel

Hey DoPhuongAnh, Welcome to the GreenSock Forum. It's a lot of fun: a color 'kaleidoscope'. https://codepen.io/mikeK/pen/powWwMm Happy scrolling ... Mikel

Hey SANDY, Its OK. Here an example using SVG and a fading effect. https://codepen.io/mikeK/pen/QWgMJjr Happy tweening ... Mikel

Hey SANDY SAMEH, A prepared CodePen with your case would be a polite gesture, it would save me some effort. Does this scenario correspond to what you have in mind? https://codepen.io/mikeK/pen/XWgaPMp Happy tweening ... Mikel

Does this example come close to what you want? https://codepen.io/mikeK/pen/WNOOYaW?editors=0010 Happy Tweening ... Mikel

Hey Laurentplenet, Try a rectangle with side curves: outward / inward. Here e.g. bezier curves https://codepen.io/mikeK/pen/JjJJZJq Happy tweening ... Mikel

Hey VITALIY, As a starter, this example could be helpful. https://codepen.io/mikeK/pen/eYRRgQZ Happy tweening ... Mikel

Hey WEINDE, A lot is possible. Try to take the first steps for this yourself. Happy tweening ... Mikel