jaden

Hi Zack, I been using this and works really well. I have a follow up question tho if you dont mind. I want one tween only to run at mobile and not at all at bigger screens, so I what I did was : if (matches){ gsap.to....) else { return; } Should I use return; or oldAnim.kill(); ? I tried both, and both work just fine, but was wondering what's considered correct way. Actually it works with empty {} aswell.

Alright. I'm happy with other eases, just was wondering if I was doing something wrong

Well title says the whole question. If I use power3.out for example it doesnt happen. What is it and can we work around it without changing ease?

Since when are we able to select pseudo elements? Isn't there a GSAP plugin CSSRule or something for selecting pseudo like ::after and ::before?

Thanks, thats nice example

That looks neat. Thanks for demo.

My demo wasn't meant to make splitting.js look impressive, it was fast coded codepen to show the end goal. Yes you are right, the HTML is super bloated (I believe that you can make it cleaner with deleting char and words indexing in variable, which are meant for CSS keyframes anyway). But the point is keeping the HTML clean while it's in production, while you are working with it. Yes, there is much easier way to recreate my demo with cleaner HTML, but say there are lots of paragraphs on the page, it would suck if you had to enter the data attributes manualy, so what I was asking, if there was automated way with splitText. It looks like @Visual-Q has a solution in his codepen, if I had known JS any better I wouldn't have to ask it, thank you

I visited scrollTrigger.matchMedia() docs and it's very useful feature I have timeline animation outside of scrollTrigger. I animate 3 elements on mobile and 6 on desktop, and on mobile view there is gap for elements that were set to display: none; with CSS media query whats way around this? PS i'm using interesction observer to run the timeline

Sorry if I'm late to party, I saw your comments but wasn't near my PC Here is the code pen: https://codepen.io/jadenjaden/pen/QWNdbpG Basically it adds data attribute with value of text (In this example I used words, works for single wrapped chars too) and I use content: attr(data) in CSS. It helps me to keep HTML clean, because instead I would have to add 2x <div> Hello </div>. This obviously gets much more messy with real life examples and not code pen demo.

I use splitting js to archive this, but wanted just to use GSAP on this project.

def the community on this forum. so much useful posts