mikel

Hey @Catalin, Does it help ? https://codepen.io/mikeK/pen/QWNMJgb Happy reporting ... Mikel

Hey @dejv, Welcome to the GreenSock Forum. Have you seen the CSS plugin? Happy tweening ... Mikel

Hey @FirstAsianinSpace, Welcome to the GreenSock Forum. Try to play with a simple SVG path. https://codepen.io/mikeK/pen/qBZXJYR Happy tweening ... Mikel

Hey @Rinku Samanta, You could use onEnter: () => gsap.to('main', {backgroundColor:color}),

Hey @Rinku Samanta, Welcome to the GreenSock Forum. How about this option? https://codepen.io/mikeK/pen/xxVLwzJ?editors=1010 Happy tweening ... Mikel

Hey JACK, Thanks ...

Hey @Lars Ejaas, How about this option? https://codepen.io/mikeK/pen/oNxwaQp Happy tweening ... Mikel

Take a look at CARL's explanation.

Hey @tailbreezy, I'm not sure what you're intending to do with it, but you could do it that way. https://codepen.io/mikeK/pen/XWdgVKo?editors=1010 Happy tweening ... Mikel

Hey @Lars Ejaas, I am not sure if you would like it that way. https://codepen.io/mikeK/pen/ExKXbzO?editors=1010 Tl_menuUpDown.to(StringAndSign, {duration: 0.2, scaleY: 0.10, transformOrigin: 'center top', repeat:1, yoyo:true, repeatDelay:0.1}); // Tl_menuUpDown.to(StringAndSign, {duration: 0.2,scaleY: 1, transformOrigin: 'center top'}); Happy tweening ... Mikel

Hey @Wrapped, Does this example help you? https://codepen.io/mikeK/pen/poveLRo?editors=1010 Happy tweening ... Mikel

Hey @SunilSap, To maintain an overview, it is better to build up the logic piece by piece. https://codepen.io/mikeK/pen/zYqZogL Happy scrolling ... Mikel

Hey @Rahul Dey, It would be good to see your case reduced to the specific aspect in a CodePen. If you then have any questions, it will be easier to offer you help.

Hey @Rahul Dey, Welcome to the GreenSock Forum. You could add a listener for "scrollEnd" - more here. Just an example https://codepen.io/mikeK/pen/c1099fe6d3d8c43ec2b928f006551450 Happy scrolling ... Mikel

Hey @Lichay, Try .parallaxContainer { position: relative; height:100vh; /* height: 3000px; */ } .height { position:relative; height: 100vh; background-color: pink; } if that is what you want. Happy scrolling ... Mikel

Hey @Alle, Welcome to the GreenSock Forum as ShockinglyGreen member! You have some options to realize it. Here is a simple way - like a mask and tweening the progress. https://codepen.io/mikeK/pen/QWNdGEE?editors=1010 Happy tweening ... Mikel

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

Nobody is perfect ... I'm still learning. Thanks, ZACH, for the hint.

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

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

Hey @ud907, YES you can. Here is a simple concept https://codepen.io/mikeK/pen/NWNbaQw?editors=1010 Happy learning ... Mikel

Hey @Hemanta, There are several options. Here is a mix of x-transform and morph. Alternatively you can morph several shapes one after the other. Pay attention to clipPathUnits = "objectBoundingBox" and that the coordinates are in the range of [0, 1] - good info on this from Sara Soueidan here. https://codepen.io/mikeK/pen/OJNbgjz Happy tweening ... Mikel

Just another approach https://codepen.io/mikeK/pen/oNxYxor?editors=1010 Happy tweening ... Mikel

Thanks, ZACH.

Yes it disappears but i have no idea why.