m4g1c14n

@Rodrigo , Ahh very clever, so we can adjust animation the end to 120% , in which case the when end is above 100% , the next content should be animating in , and the old content is not yet finished animating ( still have another 20% scroll up left ).... Yes this is actually a perfect solution PS : Setting end to max does not suit my needs though, because the animation inside is scrubbed, and at the moment the second content is coming , the first content has not finished animating ( setting to 120% or 110% is perfect though , I can now try to find the sweet spot for my animation ) Thanks a lot

Hi @Rodrigo, Merry Christmas! I wish to have a pinned scrollTrigger, remain pinned even after it has finished scrubbing the content ( after the end has been reached ) , I have tried using onLeave ( change the container into fixed, and onLeaveBack change it back to relative, but it is not working ) Check the codepen below , when Content TWO is animating in ( clip-path animation reveal from the right side ) , I want the Content ONE which has finished animating , stay pinned and not scrolling up. Codepen Pin Fixed (codepen.io) There are sections ( contentX ) on the codepen, EACH Section will have their own Timeline, and their own scrollTrigger I dont want to have 1 timeline for all contents

@mvaneijgen thank you for the recommendation, so put everything on 1 timeline and 1 scrollTrigger, I think that is definitely doable but a little bit scary, because it makes thing a little bit complicated, because we do have certain configuration different for each section , such as snap speed, and not to mention each section is now glued , we cannot move the sequence of section reveal without editting the animation script, we also cannot easily copy paste a section to other page ( by having each section their own timeline and scrolltrigger, we can easily just copy paste the HTML CSS and the timeline script for that section and put it on any other page easily ), etc So far here is our workflow, which is in our opinion is quite simple Step 1 : Our web designer will create the HTML + CSS design, we will check if all the content is displayed properly on various display, when everything is perfect, we can proceed with the animation Step 1 : Create Normal HTML + CSS (codepen.io) Step 2 : for each individual section that need to be animated ( for this example all will need to be animated, but perhaps on same page there will be some section which not need to be animated ) , we use the scrollTrigger with pin and pinspacing to animate everything Each section has their own Timeline and their own ScrollTrigger, everything so far is perfect, we love the workflow, we can individually change the scrub speed, snap speed, we can individually check each timeline with their markers, we also can copy this section's html css and timeline into any other page on the website , and everything will work perfectly , we love this capability Step 2 : Animate with Scroll Trigger With Pin + Pin Spacing (codepen.io) Step 3 : Now , all is perfect so far , we love everything , now we want to make them overlap, so that we can further control the reveal animation, we do understand to do this, a simple removal of Pin Spacing will solve the problem , and there are no problem if the only reveal animation we use is the Clip-Path from the bottom ( I could not attached the codepen i dont know why , check the codepen at the start of this thread ) https://codepen.io/m4g1c14n/pen/bGZboVg Problem : Thing become somewhat not good if we are revealing the next section using clip-path from the right side ( on this code pen example ) Pin Fixed (codepen.io) So my question remain, on the last Pen, can we do the clip-path reveal without having the last section pinned scrolling up ( because it has reach the end ), is there anyway to make the content continue pinning after it has been pinned ( I was thinking maybe using onLeave to fixed the last section, and then onLeaveBack to return them to the flow of document, is there any other idea? ) , if this is not possible, just tell me this is not possible so that I can workaround it some othe way ( maybe by forcing to reveal the animation using clip-path from the bottom for all section ) Again, I do understand your recommendation, which is to join everything into 1 timeline and control them using 1 scrollTrigger , we kind of not like the workflow , because using the individual timeline and scrolltrigger like what we have right now, the designer can move the section , and everything will work as perfectly without ever needing to touch the animation script ( for example section one, two, three, four , the designer change their mind and want to re-arrange into three,two,four,one , they can just move their HTML Code , without even needing to touch the CSS and or scripts )

Thank you @mvaneijgen The link in your example did not show how the ScrollTrigger + Scrub + Pin for the animation inside the card ( only the process of showing the card ), I also saw the codepen example "Card Move in Effect v2" and also Looped "Scrolling" Section Transitions - ScrollTrigger (codepen.io) Imagine that each card is a full width / height page, when each card is "pinned" , it will start animating the content inside ( which contains many type of animations that can be scrubbed from the start -> end of the pinning scrubbable ) I also understand that if I add the pin-spacing, I will allow the scroll naturally reveal the next card below , and when the next card is pinned, it can show the animation, but I wont be using pin-spacing, because I want to control the revealing of next card ( from simple example I have, I am using clip-path to reveal the next card , but there are many ways to show the next card ) Trully from the codepen I shared ( the one, two, three, four revealed using clip-path from right ), if I can make the pinned content below not scrolling up after the end of the pin Check the video below, this is a work in progress for my site , as you can see there are many "cards" When a card is pinned, the first animation is to reveal itself ( hence closing the card before ), and then reveal all the content inside, and snap at the end label, if the user scroll down just a little bit will trigger the next card pin, and repeat the process ( but the animation inside is widely different ) Imagine that on each page of my site, there are page that have 5 cards, there are page that have 3 cards, there are page that have 10 cards, the easiest for me in term of HTML and CSS, is simply without animation make each card 100vw, 100vh , and make sure that the content of each card is designed perfectly for various display size, and after that , simply use the scrollTrigger + pin + scrub, to perform every single animation, this workflow is very simple , there is only one problem that the card at the end of the pin will start scrolling up naturally ( which is actually okay if I use the clip-path reveal from below, but I wish to utilize various kind of revealing animation, such as staircase clip-path reveal, circle reveal, clip-path from the right left or top reveal ) 2023-12-22 10-28-39.mkv

Oh one more question in my example, the first content will start scrolling up, when the second content start animating, if i want to make the first content stay in its place what should I do? Lets say first content will only start scrolling up AFTER the third content is animating , the reason is this time I want to clip-path from the right side , and it will look ugly if the content below it start scrolling Check this pen Pin Fixed (codepen.io) Setting the end with huge number wont work, because that would make the animation inside unscrubable ( because the animation of text fading in wont finish animating at all )

@akapowl Wow, indeed, after I set the scrub to true instead of 1, it works, thanks a lot for your help @GreenSock I saw the preview release said 3.12.5 , so when the 3.12.5 is available will it be a blog post? or it will be 3.13 release instead?

The codepen I have is a very very simple example, to showcase this problem. The easiest way to see the flicker : 1. click the content area of the codepen result 2. press & release quickly the arrow down on the keyboard once to reveal the first content ( ONE Red ), it will snap to the next label "holdEnd" 3. after animation finish, press & release quickly the arrow down again to reveal the 2nd content ( TWO Green ) 4. after animation finish, press & release quickly the arrow down again to reveal the 3rd content ( THREE Blue ) So far, no flicker, continue with the next step to see the flicker of the content behind showing up in split second 5. after animation finish, press & release quickly the arrow up once, it will animate back and reveal the 2nd content ( TWO Green ), but even before the 3rd content is hidden, we can see a flicker of 2nd content very briefly 6. after animation finish, press & release quickly the arrow up once more, it will animate back and reveal the 1st content ( ONE Red ), but even before the 2nd content is hidden, we can see a flicker of 1st content very briefly Flicker will not happen : a. if we are snapping forward b. if we are scrubbing without releasing the scrub Flicker will only happen if we are snapping backwards, no matter ( from scroll wheel, key up, scrub the scroll up and release the mouse press ) What should I do? our new site uses scrollTrigger with scrub and clip-path in all of the pages ( including the simple Blog Detail page ) Please help

Or maybe was it a Flutter Ads video having an interview with Gskinner ( I might have made a mistake , I was so very keen to have any of the Native Multi Platform App Programming that support GreenSock ) ^^;

Am I Insane? I just saw Greensock video for flutter Ads , it makes ready to ditch Angular / Maui / etc for Flutter How sure are you that when you say you are unfamiliar with Flutter, or are you just under NDA ^^;

Thanks for the information, I fixed it by adding style will-change: transform; into the element that will be transformed, before even with 10 iteration, my macbook pro 16 m1 reached 30% cpu and for 30 iteration reached 50% cpu with this style applied, I can run 50 iteration animation and the CPU hover around 7-8% ? Check the new pen https://codepen.io/m4g1c14n/pen/QWBgJEw

I forked this pen from GSAP Infinite Scrolling Text, and just simply generate a 10 more random row, and when I render them, I can see that my CPU is really2 high Is there anything that I should know about, this animation should be quite light right //Change this to 30 to see the CPU is crying :( const total_text = 10; I left one row for you guys to inspect, later I will generate all Scrolling Text programmatically This is not the final form of the animation, I am planning to make a 3D Steps comprised of these text, and use them to fully close a section and then fully reveal another section ( sort of a full page transition ), and if this kind of animation is taxing the CPU this much, I might not be able to continue with my design plan Please help

Thanks a lot for the explanation, @Carl @OSUblake So in the end I just make sure that tl.progress() == 1 before I invalidate , and then I can invalidate and then reverse them

Here is the simple CodePen to illustrate https://codepen.io/m4g1c14n/pen/QWjOYbV If you click restart over and over again ( slowly ), everything works , and the random value is refreshed, but if you trigger Pause , you can never restart it anymore ( except if you remove the invalidate() ) Also if you clicked on restart button over and over again in quick succession , it will treat as if target opacity no longer 1 and x no longer 0 lets say the opacity in the beginning = 1 and x = 0 if in the middle of animation you clicked restart ( with invalidate ), it will treat as if the target opacity is current opacity and x is current X ( which is definitely not opacity=1 and not X=0, because we are in the middle of animation ) So my take is, if we are doing invalidate, it will not only recalculate the RANDOM, but also the target current property >.< so the question is how to invalidate ( which will refresh the random ), but still obey the initial state ( not current state where we may be in the middle of tween )?

So lets say I have an animation with random values, it animate properly and then I wish to restart the animation at will , lets say when I clicked a button, but I want to restart the animation with Refreshed Random value I have tried setting the repeatRefresh to true, but apparently it is not working :( Is there anyway of doing this easily? Thanks a lot

Okay nailed it.... after the help from everyone, i have finally find the culprit The culprit is the Transition style Check the Codepen http://codepen.io/m4g1c14n/pen/ZGgEwO , you can see that it is not animating correctly, BUT if you remove the transition style, it works perfectly Thanks a lot everyone, I would not notice this without all of your help PS : Is this considered a bug??