[Can we use matchMedia() for timelines outside the scrollTrigger?]

On 8/24/2020 at 4:34 PM, ZachSaucier said:

To do this sort of thing, just use the regular JS matchMedia:

 

 

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.

[Weird jump at end of tween with "expo.out" ease]

2 minutes ago, PointC said:

hmmm... Not sure what's causing that. @GreenSock will probably have to take a look. Here's the same thing using a custom ease. I just used the ease visualizer to pick expo and then switched to custom so i could copy the data. No other changes made to it.

 

 

See the Pen

See the Pen 19a3312f4763c4256a7a1a0b843992be by PointC (@PointC) on CodePen

by PointC (@PointC) on CodePen

 

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

[Weird jump at end of tween with "expo.out" ease]

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?

See the Pen JjXNvbo by jadenjaden (@jadenjaden) on CodePen

[Selecting nth child]

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?

[Can we use matchMedia() for timelines outside the scrollTrigger?]

On 8/24/2020 at 4:34 PM, ZachSaucier said:

 

 

Thanks, thats nice example

[Can we use matchMedia() for timelines outside the scrollTrigger?]

On 8/24/2020 at 5:13 PM, Visual-Q said:

This is a really good pen from @OSUblake

 

Uses matchmedia and has a solution for updating animation as well.

 

Observe how the animation progress is recorded on resize then the animation is cleared out and rebuilt back to the progress that was recorded.

 

 

 

 

 

 

That looks neat. Thanks for demo.

[Does SplitText have ability to add words or chars into data attribute of element that's wrapping them?]

11 minutes ago, PointC said:

I'm still not understanding the end objective. The OP mentioned keeping the HTML clean and the 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  

[Can we use matchMedia() for timelines outside the scrollTrigger?]

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

[Does SplitText have ability to add words or chars into data attribute of element that's wrapping them?]

3 hours ago, PointC said:

I just hope the OP pops back with some more details so we can answer the question and get this thread back on track. 

Sorry if I'm late to party, I saw your comments but wasn't near my PC

Here is the code pen:

See the Pen QWNdbpG by jadenjaden (@jadenjaden) on CodePen

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. 

[Does SplitText have ability to add words or chars into data attribute of element that's wrapping them?]

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

[Ihatetomatoes "Practical GreenSock" Tutorials - Giveaway]

def the community on this forum. so much useful posts