spartan89

Thank you @Carl

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

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

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!

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

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?!!

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

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

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