Visual-Q

Also see clear props in the css plugin docs: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

Nice... very well done.

If I'm understanding your issue I think you're looking for once: true not a toggle action. once: Boolean - If true, the ScrollTrigger will kill() itself as soon as the end position is reached once. This causes it to stop listening for scroll events and it becomes eligible for garbage collection. This will only call onEnter a maximum of one time as well. It does not kill the associated animation. It's perfect for times when you only want an animation to play once when scrolling forward and never get reset or replayed. It also sets the toggleActions to "play none none none".

I'm not sure I understand what you mean by loop over as I don't see any loops in your pen, did you mean repeat or rewind the animation with a delay in between. In that case you'd want to use a timeline rather than individual tweens and you could use repeatDelay() https://greensock.com/docs/v3/GSAP/Timeline/repeatDelay()

Hi Alextazie, I would suggest you start a new post detailing your specific problem, it's unlikely you're going to get a solution based off a three year old post and no information about your issues, and if possible make a minimal demo on codepen so we can see what your animation actually is and rule out gsap issues. I would also suggest searching forum posts on wordpress there are a number of other posts that discuss properly adding gsap to wordpress.

Updated to make it a bit more flexible: https://codepen.io/Visual-Q/pen/YzqQeEe Of course this is when Jack shows up and has a better way.?

I'm sure there's a more succinct way to write it but maybe something like this: https://codepen.io/Visual-Q/pen/zYqzpgx

Good work, I think you've got the basic techniques! If you want to get it exactly the same you'll just have to break down exactly what the sequence and rotation timings the css is executing. Gsap should certainly allow you to reproduce it. The methods of sequencing and syntax are a little different from gsap structure so you just have to be patient and work it out. You'll learn a lot in the process. Happy Tweening!

Your dice has some base css settings your aren't applying to the dice 2, but it's mainly your timings that are off , the css animation has rotations on different axis overlapping and occurring simultaneously. Your pen just plays a single axis rotation at a time so your'e part way there. You should review the docs again to learn about how to place tweens in the timeline and scheduling their playback, I also note your animation has no z axis rotation as the css animation does.

Hi Jamez, Welcome to the forum. It looks like pretty much everything is setup in your pen (html and css)to accomplish this you just need to create tweens or a timeline and replace the specific animation you referenced. If someone wants to wade in and help set it up for you they are welcome to do so but I think the getting started section goes over pretty much everything you need to learn to do this, I would suggest you spend some time learning your way around gsap basics then if you have a more specific problem or something you're not sure about we'd be happy to help.

I'm not certain if it'll help in your case but you might want to look at this discussion, killing a scrollTrigger by id:

Probably doesn't help your with Windows diagnosis but I can confirm it works fine on Wacom Cintiq on Mac.

You're missing the the . for the class selector for close-button in the query.

Hi sadikyalcin, Welcome to forum, unfortunately scrollMagic is not a gsap product so we don't officially support it here, though people are welcome to assist if they like. We recommend using gsap's Scroll Trigger. Re your question, Scroll Trigger can recalc automatically on resize so you may be able to pass a function based value along the lines of your calculateMargin() directly to the yPercent value. You can also look at ScrollTrigger.matchMedia() as well. We also recommend creating a pen so we can assist you better, as it's hard to troubelshoot just code with no context.

I think you just want use scale: 3 not transform: 'scale(3). https://codepen.io/Visual-Q/pen/LYNWLrY

You might also end up needing to do from tweens back to the boxes original state, as whatever explode does to your element it might not respect the inline styles gsap added.

Does work pretty well as a selector for specific words if anyone ever needed to target for that, of course you need to know the words in advance for the css to work for this. Can also be used as a target for subsequent gsap animations in place of having to target the array index position. https://codepen.io/Visual-Q/pen/wvGgbQG

My example just reproduces what splitting js does adding the text of a 'split item' in to the value of a data attr. Not sure why you would need that unless maybe you wanted a css selector to target a specific word or something.

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. https://codepen.io/osublake/pen/jLLqbY

I wasn't exactly sure how to reference a specific split text objects properties the way Jack showed, perhaps he can enlighten us mere mortals with a more fleshed out example. I examined the splt text object in the browser tools and came up with this. It adds data attrs with the inner text content value to the outer item, words and chars divs though I'm sure there's a more elegant way to write it: https://codepen.io/Visual-Q/pen/poyRwZQ

Well the original question is : Does SplitText have ability to add words or chars into data attribute of element that's wrapping them? Updated for split text I think what jaden is asking: Can you append new text into a split text object after it has been created? The easiest way I guess would be to revert do a string replace and split again. Maybe Jack has a magical solution though.

I don't think we want to go down the rabbit hole of what amounts to reviewing other tools on this site, especially as people then want us to support them. People can evaluate whether they like Splitting js for themselves. And that by the way is one answer... we support SplitText here.

Yeah sorry, what Criag said.

For reference, codepen of splitting js in action: https://codepen.io/chriscoyier/pen/LYVXWOJ It works quite differently from gsaps split text adding a lot of data attr to the elements it affects and appears to be controlling the propeties of css animations. If you want to use gsap you'd be looking at using splittext. Before moving on to more advanced usage like you describe you may want to familiarize yourself with it: Updated link to v3: https://greensock.com/docs/v3/Plugins/SplitText

It's hard to wrap my head around the exact interaction that occurs when screen height changes but your animation passes off control of the ball from one tween to another at the 80% point correct? I wonder if the progress of the tweens relative to one another is actually being thrown out of sync when the screen height changes.