de en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en de de en en fr en en en en en en en en pl en fr en de en es en en en en en en ja en hbs_lat en en en en hbs_lat en en en en hbs_lat en en en en en hbs_lat en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en de en nl en en en en en it en es en en en fr en nl en nl en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
OK, problem seem to persist ... I cannot hide the element initially ... how do I do that? Wouldn't I have to hide the element using css opacity to 0, and then – before animating it – unhide it? I had hoped GSAP would take care of that for me ... I thought that's what autoAlpha was also about.
NubieHere replied to NubieHere's topic in GSAP
OK, and only NOW did I see you code ... thanks.
NubieHere posted a topic in GSAP
Hi, I'm looking for an easeType of a simple drop (think golfball falls to sand – no bounce). Think gravity 9.81 ... it starts slow, accelerates and then stops. I can't seem to find anything useful when staring at the:
How to remove style property from elements after animation!?
NubieHere replied to NubieHere's topic in GSAP
Yeah, tried that, but it still won't let me 'reanimate' the bugger ... have no clue what's going on!
How to remove style property from elements after animation!?
NubieHere posted a topic in GSAP
When I use this: tl.to( all_tiles, .25, { opacity: 0, stagger: .01, onComplete: removeClass, onCompleteParams: ['on']}); // I remove the class 'on' from the element, which should then set the opacity back to 0 for me to be able to 'reanimete' them again. to 'reset' all tiles ... I cannot reanimate them again ... the 'style' property on the elements keep being: "opacity: 0" (of cource) ... But I'm using a class ('on') to set the opacity to 1 and when removing the class the opacity. How to I get rid of the style property on the elements? https://www.dropbox.com/s/z0stuaafq4umiwc/Screenshot 2021-07-04 at 12.29.03.png?dl=0
Controlling nested timelines and repeats? How to run a nested timeline only once at the end?
NubieHere replied to NubieHere's topic in GSAP
Thanks, I'm not trying to prove you wrong (I'm sure I'm the one who's wrong) ; ), but it's just that things do get fairly complicated once you have a client that says:   ... so, if you want A.B.S.O.L.U.T.E. control you have to split everything up into its own little part (modular thinking is good, just not used to do it with gsap and timelines) ... and I guess, that sometimes lead to more confusion than overview (which is what we tried to achieve in the first place). And thanks for pointing Beyond the basics out ... I've just managed to do the Express one. But will have a coffee (or maybe a G&T) and watch it right away. I do think I managed to get the damn bugger to work in the end ... thanks a lot to all of you for your help. And I will create pens in the future ... will just have to think of it in the workflow ... and due to tight deadlines I couldn't find the time for now.
Controlling nested timelines and repeats? How to run a nested timeline only once at the end?
NubieHere replied to NubieHere's topic in GSAP
What is also weird is that when I add parenthesis to fadeOut() it runs immediately and not on the timeline as you suggest in your comment. It's the complete opposite ... are you sure that's how it works? That's not how it runs on my end ...
Controlling nested timelines and repeats? How to run a nested timeline only once at the end?
NubieHere replied to NubieHere's topic in GSAP
My problem is, that I'm sure it's the complexity of the banner that is causing me all the issues. So making a minimal 'version' in codepen is probably not going to replicate my issues anyway. That will only leave me with; a minimal 'version' on codepen that will work, and my own way more complex version that will not. But thanks for at least doing your best to help, totally appreciated. I'm trying to take it one step at a time ... I have tried a couple of times to recreate it at codepen ... but I cannot target my svg paths for starters ... so it'll just be more frustration than I already have trying to 'fix codepen'. And by the way, being a subscriber to Creative Coding Club – great stuff (yeah, seriously trying to learn this thing) I'd suggest you make a 'real world' scenario on actually creating a (fairly complex) banner with certain amounts of loops, fade ins, fade outs, all the bells and whistles ... as I guess A LOT of people use gsap for stuff like this. Just a suggestion ; )
Controlling nested timelines and repeats? How to run a nested timeline only once at the end?
NubieHere replied to NubieHere's topic in GSAP
OK, the parenthesis makes a difference [ .add( fadeOut() ) vs .add( fadeOut ) ] ... it triggers the function immediately. But when the function return a timeline, why does it play the timeline right away, and NOT at the end of the main timeline!?
Controlling nested timelines and repeats? How to run a nested timeline only once at the end?
NubieHere replied to NubieHere's topic in GSAP
OK, obviously not working as expected (sigh, I seriously don't know why I keep having these kind of problems). Now, it seems that the 'final' step is triggered immediately no matter WHAT the counter says. I do the following: var maxLoops = 3; var loopCount = 0; function fadeOut () { let tl_fadeout = gsap.timeline(); tl_fadeout.fromTo(header.chars, .1, { opacity: 1 }, { opacity: 0 }); return tl_fadeout; } function isFinalLoop () { loopCount++; if ( loopCount == maxLoops ) { main_tl.pause(); } } main_tl .add( getHeader() ) .add( bilforsikringFadeIn(), "-=1" ) .add( turnOnEl(), "+=1" ) .add( turnOffEl(), "+=3" ) .add( bilforsikringOff(), "-=1" ) .add( getHybrid(), "-=0" ) .add( bilforsikringOn(), "-=0" ) .add( getTextContainer(), "+=2" ) .add( getCta(), "-=.2" ) .call( isFinalLoop ) .add( fadeOut() ); Now, WHY on earth does the 'fadeOut' get triggered immediately? It runs 'on top of' the first 'getHeader' timeline as is the best way I can describe it (it seems it both fades in and out at the same time ) ... this is driving me absolutely bunkers now ...
Controlling nested timelines and repeats? How to run a nested timeline only once at the end?
NubieHere replied to NubieHere's topic in GSAP
Thanks, makes perfectly sense ... but it would also mean that the main timeline should repeat 'forever' or at least the number of maxCount ... probably having to manage the repeats using the var I guess.
Controlling nested timelines and repeats? How to run a nested timeline only once at the end?
NubieHere posted a topic in GSAP
I'm creating a banner that has to loop three times. Now for the animation to appear smooth, I have to kind of 'animate out' the 'final' step in order for it to be able to 'start over' for each loop. But I don't want to 'animate out' the 'final' step the LAST TIME (when the looping ends). I have absolutely no clue about how to achieve this and even where to start. If I have this: main_timeline. .add(Head) .add(Body) .add(Tail); <-- do not want this to disappear the last time around I want to repeat the main_timeline three times. And I want to basically fade out the Tail on every loop EXCEPT for the last time ... now, HOW would I set up a thing like this using gsap!? Are there some 'hidden' features for doing stuff like this (fancy switches or the like ... )?
“This is why I have absolutely no issues with paying for a subscription to GSAP, great product and awesome forum!”
“Reading through the GreenSock docs; been amazed like 14 times so far! How can a library be SO complete? Been using that for about 2 years now but man... This the first time I feel this way about a library.”
“The GreenSock animation platform is one of the most useful sets of tools in existence when it comes to web animation.”
“The best thing about GSAP is that it just works, and it works well. On every single browser I’ve tested.”
“GSAP makes my job fun, because it allows me to focus on creating rich, engaging web experiences, while GSAP handles much of the implementation details behind the scenes.”
“GreenSock has encouraged me to play with the code, to dream up new and exciting things to do.”
“I will never say it enough but @greensock you are absolutely amazing and you have no idea how much time and brain cells I have spared thanks to you 🥰”
“GSAP has been absolutely the best experience for me as a newbie. The people in this community take serious time to help you with upcoming issues on real life projects like I've never experienced before.”
“I think I love GreenSock as much as bacon.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.