Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by NubieHere

  1. 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.

  2. OK, back again after months and months of not using GSAP – learning everything over again.


    I have a very simple case of wanting to animate in a line of text – starting with it NOT being visible AT ALL.


    Now, I can't for the life of me figure out how to make this happen. I've tried setting the opacity to 0, fiddling around with 'to' and 'from', fiddling with AutoAlpha true/false, 0/1 and what not ... HOW can I simply make a string of text appear letter by letter using SplitText without the text showing up initially?


    And by the way, Codepen suck as it won't let me 'replay' the pen above – what happened to the "run" button once there (as far as I remember) – I seem to have to reload the entire page to rerun it, seriously?

    See the Pen LYOyQqW by blaasvaer (@blaasvaer) on CodePen

  3. 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:


  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.

    • Like 2
  6. 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 ; )

  7. 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 () {
    	if ( loopCount == maxLoops ) {
    	.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 ...


  8. 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:


    	.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 ... )?


  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

    As if .fromTo is not working somehow?


    OK, missed your second object ... sigh.

  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:

        .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;


  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;

    Basically remove the $.when wrapper ... sigh. Another day wasted on front end land ...

    • Like 1
  12. I created this smooth image slider with animated text on top using SplitText ... all was fine ... until this morning when I updated WordPress. Now, I guess this has nothing to do with WP ... and I've been trying all morning to fix it ... without any luck (as that seems to be what's needed now). Now, recreating a codepen from 441 lines of code would be a no go. But I'm basically using two methods for showing and hiding the text respectively after a certain amount of time.


    I've added a delay to the .from to see where the actual flashing occurs. And I can see that the text that is about to get 'animated on' (shown), briefly show up in the browser (full opacity) before the actual tween begins from an opacity of 0. Now, I've messed around with all I can think of – also the autoAlpha, which seem to make absolutely no difference whether it's set to 0 or 1.


    Can anyone spot WHY a sudden flashing would occur from the code below?


    function hideText ( element ) {
        var myText = new SplitText( element, { type: "words, chars" } ),
            tl = gsap.timeline(),
            chars = myText.chars;

            tl.to(chars, { duration: fadeDuration, opacity: 0, autoAlpha: 1, stagger: 0.02 }, "+=0");

    function showText ( element, content ) {
        $( element ).text( content );

        var myText = new SplitText( element, { type: "words, chars" } ),
            tl = gsap.timeline(),
            chars = myText.chars;

            tl.from(chars, { delay: .5, duration: fadeDuration, opacity: 0, autoAlpha: 1, stagger: 0.02, onComplete: revertText, onCompleteParams: [ myText ] }, "+=0");

    function revertText ( myText ) {



    Disabling the .revert() doesn't make any difference either by the way.