Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

12 Newbie

About NubieHere

  • Rank
    Advanced Member

Recent Profile Visitors

1,019 profile views
  1. 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 wil
  2. 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 ...
  3. 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
  4. 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!?
  5. 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"
  6. 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.
  7. 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
  8. 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 ... ; )
  9. 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 work
  10. 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
  11. 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; Ba
  12. And it has nothing to do with FOUC, as it keeps occurring in the slider (the content is loaded just fine).
  13. Yeah, that made it even worse, now nothing is showing up ... hmm. Seriously can't figure out why this became such a mess from a WP update ... but hey, I guess that comes with the job ...
  14. Erhm, ok ... my problem is that I animate it both IN AND OUT ... that is; initially I animate .from opacity: 0 and then .to opacity: 1 ... now I guess the problem would kick me either one way.
  15. Thanks, that was just a spill over from all my attempt at getting it to work ... I've tried ALL variations; with, without, both, none ... it doesn't make a difference ... I'm out of options. OK, will try your suggestion of setting it to 0 ... just weird, at it's been working just fine for more than a year.