Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

1,137 profile views

NubieHere's Achievements



  1. OK, missed the in/InOut/Out option. Seems and 'expo.in' does the job all right.
  2. 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:
  3. Yeah, tried that, but it still won't let me 'reanimate' the bugger ... have no clue what's going on!
  4. 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
  5. 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: <insert random **** here> ... 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.
  6. 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 ...
  7. 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 ; )
  8. 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!?
  9. 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 ...
  10. 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.
  11. 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 ... )?
  12. And it did in fact fix the problem ... don't know why I'd have to spent the better part to this morning pulling my hair on stuff like this ... ; )
  13. Thanks, but if I simply change .from to .fromTo, I get: Uncaught TypeError: o is undefined ea https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js:10 fromTo https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js:10 someElementOn file:///Applications/MAMP/htdocs/banner/V2/510_180/assets/js/animation.js:91 <anonymous> file:///Applications/MAMP/htdocs/banner/V2/510_180/assets/js/animation.js:185 EventListener.handleEvent* file:///Applications/MAMP/htdocs/banner/V2/510_180/assets/js/animation.js:1 gsap.min.js:10:1643 As if .fromTo is not working somehow? OK, missed your second object ... sigh.
  14. Tried to make a codepen but I couldn't target my SVG groups for whatever reason ... and didn't feel like spending the day trying to fix svg issues on codepen ... I'm on a deadline here ; ) But basically I'm running a range of nested timelines like this: main_tl .add(getHeader()) .add(someElementOn(), "-=.5") .add(turnOnEl(), "+=1") .add(turnOffEl(), "+=2") .add(someElementOff(), "-=1") .add(getSomeElement(), "-=0") .add(someElementOn(), "-=0") If you notice, I'm trying to run 'someElementOn()', again, at the end (or some other time). But it won't animate on again the second time as it did just fine the first time. It just turn on (no animation, timing or what have you). This is how i set (return) the timeline: Can someone please explain to me why it wouldn't simply just run as 'expected' the second time!? function someElementOn () { let tl = gsap.timeline({ repeat: 0, repeatDelay: 0 }); tl.from(splittext_element.chars, {duration: .1, opacity: 0, stagger: 0.02 }); return tl; }
  15. OOOOOOOOK! Found the bugger ... not GSAP (as usual) at all. But why it 'suddenly' happened I don't know ... but; if you use promises (the jQuery equivalent that is), by doing stuff like this: $.when( header.text( slideObj.post_title ) ) .then(function () { showText( header, slideObj.post_title ); charsCount += slideObj.post_title.length; }); You basically 'delay' the events ... do this instead: header.text( slideObj.post_title; showText( header, slideObj.post_title ); charsCount += slideObj.post_title.length; Basically remove the $.when wrapper ... sigh. Another day wasted on front end land ...