Visual-Q

it's smooth on my imac though I don't have a retina display. Maybe in the full code you've got some kind of throttling added that I'm not seeing but if I'm interpreting it correctly your code appears to create a new tween and overwrite the previous every time the event listener sees a delatY change. Maybe you could refactor it to throttle the number of tween calls and pass the dynamically changing deltaY to the tween in a modifiers function? Not sure if that would work better but it seemed logical to me. Also you're doing a lot of console logging and writing the changing deltaY to a data item, these would also probably be slowing down execution.

Yep there's nothing stopping you from using the technique that page uses, it's a fairly simple solution that makes it look like the shape of a mask is changing when it's really just moving a container up. If you study the way the elements and css are constructed and duplicate it the elements can be animated by gsap. It looks like the mask shape is achieved by a large border radius on the outer container. The container moves up while the inner div's background image is moved counter to this to maintain it's position on the screen. A timeline with two tweens targetting an array of the slide elements and fired by deltaY on mousewheel listener may be all you need. I actually like this solution, it makes it look like something complicated is happening but it's just clever css.

Maybe that's why Petr Tichy hates tomatoes.

That's an interesting article that shows a rather specific implementation for loading js libraries with a plugin. If you're just getting started with Wordpress though it's probably a bit much to digest. If you're experienced you can evaluate whether it's a good solution for you. To use gsap you basically ad it like anything else to wordpress using enqueu: https://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/ Then of course you have to learn how to use gsap. I would think in theory that if LiveIcons has properly licensed and is including the gsap with the bonus plugins then you could access them if the plugin is installed but they would only be available on the site it's installed on. This is just a guess though. Did you mean the editor Atom: https://atom.io/ I wouldn't expect it would be different than doing anything else in atom with javascript. I don't use it.

There's a lot going on in this including gsap but if you mean the black texture with the mouse over effect it's definitely happening in canvas. If you inspect the sources there's js file chunk-vendors... which might point you to what library if any they are using. You can see gsap in there and various others.

I believe you may have an issue with immediatRender on the fromTo tweens. See the following: https://greensock.com/immediateRender

Interesting thanks for chasing down that error and letting us know, I would have assumed it was a subpixel rendering error. Knowing that it was a calculation error should help with similar issues in the future.

I'm guessing you want to prevent default and retrieve the href value? As your'e using jquery: https://www.w3schools.com/jquery/event_preventdefault.asp https://stackoverflow.com/questions/2098408/how-to-get-href-value-using-jquery

That's a deep dive into SVG. I played around a bit I could get it to work with 2 separate text items but couldn't manage to line things up with tspans in the same text item regardless of how I adjusted x,y,dx,dy. Of course bear in mind I didn't have clue what I was doing. If you're working with dynamic text maybe you could add some logic to split your strings to write to multiple text items? Then again maybe someone will come along that actually knows about this and has a real solution? Found a discussion on STOV about inserting breaks with svg text spans might point you in the right direction. https://stackoverflow.com/questions/49063695/how-to-insert-line-break-in-svg-tspan-element

The worst thing is when you spend two hours visiting forums, rereading documentation, rewriting it ten different ways... end up convinced that you have no idea what you're doing and then you see it... but for the typo, what you had to begin with, was fine. ?

If I can make a suggestion, there's way too much in your codepen to try and understand and expect people to sort through and debug. Note that scrollmagic is not a gsap product so it isn't officially supported here but lots of folks use it so someone may step up to help but not if they have to spend a huge amount of time trying to parse through your code to figure it out. If your goal is to get an animation to run and reverse from triggers I would suggest you strip this all down to one element and tween and work from there to get your scroll magic actions working correctly, and then maybe someone might help you figure out why it isn't working. Once that is accomplished you should be able to scale it back up to include the rest of your tweens and elements.

This follows the recent thread 'Animating height percent' Jack came up with a great solution using a function for animating to an auto value. In the original, he showed it using a fromTo but what I thought was of particular note was that it can work using just a to tween. I thought it was worth promoting to it's own thread to make it easier to find as we see periodic questions about how to animate to an 'auto' value. I think this pen does a reasonable job of illustrating it.

Jack's solution can be plugged in to what you have, and seems to work just fine, without having to prerecord heights to an array.

Ah yes, but with artifice and clever deception, or just plain playing dumb, one can prod Jack to compete with himself... thus revealing the solution.?

Leave it to Jack to show how it can all be done in GSAP. I'll add my own humble addition. If you're going to use his solution above and you want to hide the items initially until you're ready to call the animation: add display:none; to .container css and tl.set(".container",{display:'block'}) //or whatever your intended display .fromTo... or you could use visibility:hidden/'visible '

Realistically you'd probably want to avoid having the scrollbar altogether for something like this. Something like this on the body would do it overflow-y:hidden; Otherwise you'd need to add some logic keeping track of where the slides are in the window when using the scrollbar to determine which slide the scroll actions want to target. NOTE this was only just a quick example of how you might address different sized sections, to make it production ready you'd need to examine all the possible interactions and points of potential failure and add the logic to counter them.

See the last codepen in my second reply it iterates through images of different heights and uses height on parent instead of scale so it doesn't affect the children.

I see the error in Safari in both links. I think it's an issue with the pseudo selector. It works if you apply the animation to the ".box" item instead of the '.box:after"

Or you can set the container to a height of 0 with overflow :hidden. Add an inner container record it's height and animate the outer container to match. If heights were consistent it could be keyed to only one element. Example of iterating through multiple items with different heights:

Alternately you could consider animating scaleY then you can use a .to tween but the children get scaled with the parent.

Happens to me too much, usually ends up being a misnamed variable somewhere that causes me fits.

Though it may not produce anything like what's needed here this is a pretty interesting smoke effect in canvas. Looks like this guy is working on making a particle engine. https://jsfiddle.net/jonnyc/Ujz4P/5/ And some info about it on his blog: http://www.blog.jonnycornwell.com/2012/07/14/particle-smoke-effect/#more-77

If you don't need the slidecontainer wrapper you can get rid of it and scroll the window instead. Then you could use jquery to get the offset position of the slides and scroll the window to that. UPDATE: DOH I see I didn't read the original question entirely this only gets you part way solving for scrolling different sized sections, to scroll normally to the bottom of an oversized item you would also have to do as Craig said and test the position of the current slide against the window: This might help: https://stackoverflow.com/questions/4653911/jquery-detecting-if-the-bottom-of-the-div-is-touching-the-bottom-of-the-browse and then you need to attach the logic to the mousewheel event listener to prevent the goto slide functions from firing until it hits the bottom of an item. You'd probably also want to test it in reverse to be able to scroll up normally as well in these instances. Another easier way might be to look at using scrollMagic and triggers to fire the scrolls as opposed to the current event listeners.

Yeah I know it didn't solve the initial problem but it did produce an interesting variation with cycle staggering left right out from center as opposed to symmetrically selecting pairs which I thought was kind of cool. Though with testing I note I have to adjust the number you are dividing by if the number of boxes changes.

This sort of does it though the respective lefts and rights of the pairs are staggered, at the very least another option for the effect even thought it's not completely symmetrical. return Math.abs((boxes.length / 2.5) - i) * 0.25; odd even