[How to create a quotes rotator using Timeline Stagger and SpiltText]

Thank you @Carl 

[How to create a quotes rotator using Timeline Stagger and SpiltText]

13 hours ago, PointC said:

Hi @spartan89

 

I think this should work for you.

 

See the Pen VMervE by PointC (@PointC) on CodePen

If you'd like the quote to stay up longer, you can change the pause variable. If you don't want the next quote to overlap at all, you can set the overlap to 0.

 

Hopefully that helps. Happy tweening.

Thank you so much PointC it is exactly what I want and it works so smooth!

Just one small thing here: when the last quote goes out the first one starts again after some time and it's not like the other quotes in the row like 3 after 2!!

If you could make this more fluent it would be awesome! Thanks again

[How to create a quotes rotator using Timeline Stagger and SpiltText]

On 9/17/2017 at 9:49 AM, GreenSock said:

Can you be a little more specific with your question? What exactly isn't the way you want it in that codepen? 

If you look at the Pen you can see that it is not organized, I want that when a quote starts going out the other one start coming in simultaneously for all the quotes, but this only happens for the first two quotes.

I also want this as an option: the quote goes out completely and then the another one starts coming in.

And I want it to have a loop! when the last one appears it goes back to the first one. right now the quotes stop showing up when they are all shown just once, and there is nothing to see afterward.

And I want this whole function to be possible for splitting and running animation on lines, words and chars like options and the user can select one!

I hope it's clear enough. I have spend hours on this but couldn't get it to work!

Thank you

[How to create a quotes rotator using Timeline Stagger and SpiltText]

Hi everyone!

I would like to create a quotes rotator with SplitText and Timeline Stagger which can be animated in lines or words or chars!

I have already tried to create one and there is the Pen that I made below here but it is not really what I wanted to achieve!!

I would very appreciate any kind of help. Thank you!

See the Pen VMvaMB by ershad989 (@ershad989) on CodePen

[TranslateZ is not working!!!]

I reported it! and you are right it has nothing to do with GSAP

[TranslateZ is not working!!!]

Hi

I have 2 cards here with the the same HTML, CSS and JavaScript, there is an element which has mix-blend-mode property between them, the second one is not working as it should!!

I want to have that element there!

Why it is not working?!!

See the Pen pNKzYb by ershad989 (@ershad989) on CodePen

[How to stagger staggered animations? stagger inside stagger]

 

 

Let us know if that helps!

 

Jonathan Thank you I know how positioning works but I dont know how is it going to help me achive that effect .. I think my problem is that I don't know how to get my target elemnts

[How to stagger staggered animations? stagger inside stagger]

 

 

So basically for each .quick-info-item we now grab each anim-el inside of it and do a stagger.

We then start the stagger on the next group of anim-el items before the previous one ends.

 

Thank you I exactly want to have that effect but I didn't mention this, I am using ScrollMagic as well and I need to have this effect for a couple of groups of these quick-info-items, it is a scroll animation that occurs on scroll, I dont want to write a code for every one of these groups ..

 

so here is my actual code:

 

 

    function fade_scroll_animation() {
        var $anim_scroll = $(".fade-scroll"),
            $anim_text_g = $(".anim-text"),
            anim_time = .7,
            anim_stagger = 0.1,
            initial_delay = 0.1,
            easing = Power2.easeInOut,
            elem_from_top = false,
            elem_y = "40";

        $anim_scroll.each(function() {
            var $this = $(this),
                $anim = $this.find(".anim-text");

            var tl = new TimelineMax();
            tl.staggerFrom($anim, anim_time, { y: elem_y, opacity: 0, ease: easing, delay: initial_delay }, anim_stagger);


            scene = new ScrollMagic.Scene({
                    triggerElement: this,
                    // triggerHook: "onEnter",
                })
                .setTween(tl)
                .addIndicators()
                .addTo(scrollMagicController)
                .reverse(true);
        });

    }

    fade_scroll_animation();

I have to start the function with this : $anim_scroll.each(function() { ... )}

then I have to write a Tween for it which somehow gets an array of items inside .quick-info-item and the staggers them while staggering the .quick-info-item elemnts themselves    

 

I'm not sure if it's possible 

[How to stagger staggered animations? stagger inside stagger]

Hi,

 

First I want to say I'm really happy that I'm using GSAP! it's wonderful ..

 

Please check out my Pen ... 

Here we have 3 sets of elemnts and I want to stagger the 3 of them with a stagger time of sy 0.1s and simultaneously stagger the elemnts inside them ..  right now the elements of the second block wont start their animation until the last elemnt of the previous block animates ...

so basically I want to stagger 3 blocks of staggering elements, I don't want one block to wait until the previous one is done.

and I have to start the whole function with     $(".fade-scroll").each( ...  so please don't suggest to change that

also I dont want to use setTimeout function

somehow by getting ".quick-info-item" and ... would be great

I'll appreciate it very much if anyone could help me..

See the Pen ALBpkX by ershad989 (@ershad989) on CodePen