[timeline repeat iteration vs standalone tween repeat iteration]

Interesting...

If you slow it down and you watch the logging, observe that it always returns 1 on the reverse of the Yoyo almost like it's counting two different states one iteration for the yoyo and a second for the repeat.

 

Might be a bug

 

See the Pen gOgwXxO by Visual-Q (@Visual-Q) on CodePen

[.fromTo starting from 0 instead of passed value when >1000]

Kind of hard to tell as I can never manage to commit Regex rules to memory. but if as you say it only fails with numbers including "," that would seem to point to a failure in the Regex. I would try logging out those values to be sure they are yielding the right results.

 

Assuming an issue with Regex maybe this will help.

https://stackoverflow.com/questions/6649327/regex-to-remove-letters-symbols-except-numbers

 

If no luck with this please try making a codepen if possible so we can take a closer look.

 

[Distribute width of SVG rectangles and getting them flush side-by-side]

You can do something like this but of course it's not actually distributing things like yours just overlaying them. Maybe Jack or someone will come along with some better advice. There's likely a better way to do it I'm not that familiar with this utility.

 

See the Pen MWJezEQ by Visual-Q (@Visual-Q) on CodePen

[Distribute width of SVG rectangles and getting them flush side-by-side]

Did you mean something like this?

 

See the Pen PoWzdPj by Visual-Q (@Visual-Q) on CodePen

[Resize and positioning text on scroll]

I don't think flex positions are directly animatable so you could use top, padding, margins , transforms... whatever you find easiest instead. You also might want to look at the new flip plugin https://greensock.com/docs/v3/Plugins/Flip

 

See the Pen BapoWPB by Visual-Q (@Visual-Q) on CodePen

[ScrollTrigger - Vertical centering of absolutely positioned content]

Does this do it, note as requested it starts to fade in when section 3 hits the middle however the box at that point is positioned in the center of that section which has only travelled halfway through the screen and therefore is at the bottom when it starts to become visible.

See the Pen RwKWGgq by Visual-Q (@Visual-Q) on CodePen

[ScrollTrigger - Vertical centering of absolutely positioned content]

Sorry wrong pen meant to post this one

 

See the Pen YzNyqmW by Visual-Q (@Visual-Q) on CodePen

[ScrollTrigger - Vertical centering of absolutely positioned content]

Like this?

 

See the Pen dyNYMgP by Visual-Q (@Visual-Q) on CodePen

[ScrollTrigger - Vertical centering of absolutely positioned content]

Was having a bit of trouble understanding exactly what you wanted to occur with the two scroll triggers this what you were after?

 

See the Pen vYgNLWQ by Visual-Q (@Visual-Q) on CodePen

[How to disable GSAP on all other pages but not the homepage?]

20 minutes ago, iDad5 said:

I agree that would be the best way, only to register GSAP and his/her own script if(is_front_page()...) in functions.php but from the way the question is asked I surmised that this would probably lead to more questions and those would be to 'wordpressy'  

 

Assuming assets are propery enueued in php they would already be accustomed to working in the functions file.

 

If they are manually added then yeah you could do it all in js something like:

 

if ($("body").hasClass("home")) { //check your home page to see what unique classes are appended to the body
    // do stuff
}

or

 

if (document.body.classList.contains('home"')) { //check your home page to see what unique classes are appended to the body
    // do stuff
}

 

[How to disable GSAP on all other pages but not the homepage?]

I usually use if is front page: https://developer.wordpress.org/reference/functions/is_front_page/ to detect home page.

[ScrollTrigger: How to animate two scenes that lay on top of each other]

Hey Samuel welcome to the forum.

 

It's a bit hard to diagnose without context so hopefully you'll be able to get a codepen up. A simplified test case is usually easier to diagnose than a complex example so you might try something basic just to illustrate your issue.

 

In the meantime check out this page it covers a lot of common issues people have and includes a section about nested scroll triggers which might apply to your situation.

 

 

[ScrollTrigger markers are not removed when killed]

Just remove markers:true

[scroll animation after onload animation]

Zachs answer about animating different elements made me think you might also animate different properties to move the same elements as well. Possibly set  up the css so you can use Left,Top with one animation and the x,y transforms with the other. I believe this could solve the conflict and should allow everything to end up in the right place.

 

Or you could use x,y with xPercent yPercent: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

 

See the Pen WNoLYMB by Visual-Q (@Visual-Q) on CodePen

 

 

[scroll animation after onload animation]

Jack's is definitely a better solution though it still creates intermittent problems depending on when you scroll.

 

It's an interesting issue though, even if it hasn't come up before I can certainly see how people might want an initial animation that subsequently reacts to scroll input. The question is how best to handle it so it doesn't break the user experience.

[scroll animation after onload animation]

The issue is if you start scrolling before the initial animation is done the scrub and start animation fight for control. You could try disabling scrolling till the first animation is complete but that might be confusing for people. At the very least make the fist animation faster so the scroll disable doesn't last so long.

 

See the Pen VwmqKMN by Visual-Q (@Visual-Q) on CodePen

 

 

[GSAP3 delay not working with scrollTrigger]

Not entirely sure what you planning to do here but adding immediateRender: false may help.

 

https://greensock.com/docs/v3/GSAP/Tween

 

See the Pen mdOzbwx by Visual-Q (@Visual-Q) on CodePen

 

 

 

[Know about gsap]

And check out some of the codepen examples often makes a huge difference in understanding how it all fits together when you look at other coded examples:

 

https://codepen.io/collection/KiEhr

 

https://greensock.com/st-demos/

 

Plenty more as well just look around for them like Blake's page here:

 

https://codepen.io/osublake/

 

And Craig's motion tricks site

 

https://www.motiontricks.com/

[fixed scroll trigger add and remove class]

Zach answered a question in the banner adds forum that might be helpful to you. Uses timeline and event listeners and also demonstrates clip-path.

 

See the Pen NWbBQrX by GreenSock (@GreenSock) on CodePen

[fixed scroll trigger add and remove class]

2 minutes ago, artstyle said:

it is clip not clip-path 
this is the trick. clip-path clipping everything behind while clip is not

 

If you say so, I never use it I usually move or transform things. Hopefully this helped though.

[fixed scroll trigger add and remove class]

2 minutes ago, Shrug ¯\_(ツ)_/¯ said:

6 more year later and I still agree with @GreenSock, unless he has changed his view of course. 😆

 

Yes I think you're supposed to use clip-path or something now but I think the syntax is similar and concept is basically the same.

[fixed scroll trigger add and remove class]

Are you asking about the syntax for animating clip:rect note I believe that has been depreacted in favour of clip-path:

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

 

However this is the syntax still seems to work: Updated to loop through array

See the Pen vYyzLoe by Visual-Q (@Visual-Q) on CodePen

 

[fixed scroll trigger add and remove class]

There's number of examples of horizontal slider sliders on this page https://greensock.com/st-demos/

 

Based on the example from the site your showed and given that you want a timed auto slide and user initated swipe type action you might just be able to setup a timeline that changes at required intervals and then use a wheel event, and any other interactive events that are anticipated, to manually trigger  a slide, you could use the event to advance the timeline at the same time perhaps to a label to keep things running smooth.

 

https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event

 

Repeat delay might also be useful here https://greensock.com/docs/v3/GSAP/Timeline/repeatDelay()

 

As far as adding removing classes a callback could do that so yeah you can add in functions wherever you need them. See call() and add() in the docs:

 

https://greensock.com/docs/v3/GSAP/Timeline

 

One more thing of course Zachs tips are a good place to start when thinking about this type of thing

https://css-tricks.com/tips-for-writing-animation-code-efficiently/

 

[Please help toggle Keyframe animation by clicking button!]

I have no idea what your trying to do but it seems you can set the animation-play-state with gsap. I'm not too familiar with css keyframes but I imagine you could control other properties in a similar fashion.

 

See the Pen NWbzJRp by Visual-Q (@Visual-Q) on CodePen

[Calculate and animate height in timeline]

You can get the height of an element a couple of different ways, here's a couple of links to methods for that. Using it within the timeline you could use a callback at an appropriate point to get the values when you need them. Not sure what you're meaning to do with it so hopefully this points you in the right direction.

 

https://www.w3schools.com/jsref/met_element_getboundingclientrect.asp

 

https://www.w3schools.com/jsref/prop_element_offsetheight.asp