mikel

Hey @heavylifting, I'm not sure - is this a solution where you are looking for ... https://codepen.io/GreenSock/pen/rNOBLBV?editors=1010 Happy scrolling ... Mikel

Hey @lebensform, Welcome to the GreenSock Forum. Here is a small example of how you can use GSAP scrollTrigger https://codepen.io/mikeK/pen/wvMpazV var action = gsap.timeline({ scrollTrigger: { trigger: ".sec02", scrub: 1, pin: true, start: "top top", end:"+=2000", // scrolling distance = 'scrub duration' of timeline } }) .to('#wrap', {y:-wrapImgHeight*4, duration:2, ease:'none'},0.5 ) // position 0.5 - anaimation should not start directly after pinning .to({},{duration:0.5}) // just a little pause before going any further Happy scrolling ... und Grüße aus Hamburg Mikel

Hey @Sympozium, Can you please show your case in a reduced CodePen to better understand your intent. Kind regards Mikel

Hey @yulia, Play with this code https://codepen.io/mikeK/pen/wvMrVGQ Happy scrolling ... Mikel

Hey @yulia, I am not sure that I am interpreting your intention correctly https://codepen.io/mikeK/pen/MWKEdmv Happy scrolling ... Mikel

Hy @jimmy-a, Search for mask or clip-path ...

Hey @yulia Did you see this post?

Hey @Triphys, Welcome to the GreenSock Forum. The key is scrub Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress. Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out. https://codepen.io/mikeK/pen/ExPwXEa?editors=1010 And another version with even / odd https://codepen.io/mikeK/pen/MWKEoqM Take a look at batch also. Happy scrolling ... Mikel

Hey @kristoffer, If you want a break between forward and reverse, I would scrub a timeline like this. Alternatively, tween the progress. https://codepen.io/mikeK/pen/oNbGXoR?editors=1010 Happy scrolling ... Mikel

Hey @jimmy-a, autoAlpha Identical to opacity except that when the value hits 0 the visibility property will be set to hidden in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to inherit. It is not set to visible in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that’s probably not what was intended). And for convenience, if the element’s visibility is initially set to hidden and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your CSS visibility: hidden) and then fade them in whenever you want. Kind regards Mikel

Hey @jimmy-a, Welcome to the GreenSock Forum. This could be a solution https://codepen.io/mikeK/pen/PoZJYZq? Happy scrolling ... Mikel

Hey @Alexandra Spalato, If you would provide a minimal layout and the desired animation via CodePen, it would be easier to show you the possibilities. Kind regards Mikel

Hi @Alexandra Spalato, My example shows how GSAP scrollTo works to navigate smoothly from one section to another on a page. If you want to navigate from one page to a specific point on another and the files in same directory try this <a href="anotherPage.html#section3"> Section Three </a>

Hey @Alexandra Spalato, The different uses of href seem to irritate you. Better you only use it for an absolute URL - points to another web site (like href = "http://www.example.com/default.htm") a relative URL - points to a file within a web site (like href = "default.htm") Maybe this example will help you. https://codepen.io/mikeK/pen/rNxwpOm Happy scrolling ... Mikel

Hey @Kayoshi, If you prefer fixed box widths, this version could be interesting. Add / duplicate boxes for large window widths. https://codepen.io/mikeK/pen/oNXoOBq Happy tweening ... Mikel

Hey @aryan3650, I am not a friend or connoisseur of WORDPRESS. How about <strong> https://codepen.io/mikeK/pen/XWXRJWV It could be a strong solution ... Mikel

Hey @aryan3650, You could use a span object for numbering. Nested elements - The element you are splitting can contain nested elements such as <span>, <strong>, <a>, etc. Works for words and chars, not lines (see this for a workaround for lines). https://codepen.io/mikeK/pen/pogeQrg Happy tweening ... Mikel

Hey, Instead the advanced version - using amount or each - you can use a simple stagger and define a duration (more here) https://codepen.io/mikeK/pen/wvMJMme?editors=0010 Don't be confused - just happy staggering ... Mikel

Hey @aryan3650, Welcome to the GreenSock Forum. This can be an option: take a 'negative stagger amount' for a 'reversed split array'. Sorry - I couldn't find any information in the DOCs about the 'negative amount'. Basically: Please use the current GSAP version. https://codepen.io/mikeK/pen/ZEQLZjV Happy tweening ... Mikel

Another option: separate animations https://codepen.io/mikeK/pen/KKVNqjo

Hey Zach, It's a wonderful human attitude: life is colorful and presents different solutions. happy moderating .. Mikel

Hey @POG, If you set e.g. ball [3] to opacity: 0.25 you could use a from tween. I hope I understood your question correctly. Otherwise present a reduced CodePen with your case. By the way: if you set a tween repeat: -1, it runs infinitely, the next tween will not start! https://codepen.io/mikeK/pen/xxZRgme Happy tweening ... Mikel

Hey Zach, Thank you for your detailed and understandable execution. So I avoid autoRotate: true and it runs as expected. https://codepen.io/mikeK/pen/bGEwrqj?editors=1010 Kind regards Mikel

Hey PointC, I know autoRotate - very helpful with curves. The object already has the correct, the expected orientation. The Point: Why do I have to correct this here?

Hey Zach, If I want to run an object from right to left, I could start the motion path on the right: "the align property bends coordinate spaces in order to position the target exactly on top of the path." But then the object is upside down. So in this case I have to start the path on the left and use a from tween? https://codepen.io/mikeK/pen/RwrGKVP Kind regards Mikel