Maglr.com

Hi Guys thanks for the replies, I am currently looking into another solution that doesn't involve iframes but uses shadowDom. Any tips & tricks or other ideas are always welcome. I'll come back on this when there is more news to tell.

Is there anyone out there that can point me in the right direction? I am working on a project where pages that use ScrollTrigger for scrub and non-scrub animations are embedded like in the demo below. An iframe is placed inside a container and with a css trick that uses padding is sized so that the iframe will always be fully stretched out and will never scroll. I there some kind of way to tell scrollTrigger which part of the iframe is visible to the viewer? The already is a communication bridge between the parent and child windows (not in the demo) but I have not yet found a way to trigger a ScrollTrigger without actually scrolling the window itself. https://codepen.io/jaap-maglr-com/pen/Yzgegxx

Hi Rodrigo, Thanks for the reply and advice. I ended up with a solution that looks similar to your first suggestion: I have a list with motionPaths that will be invalidated on resize and when there is a pinned scrollTrigger attached to it the trigger is killed and a new one is created.

I created the following demo that resembles the setup that I am working on. It is a setup that uses css grid and sizes in em's to scale the entire grid based on the width of the viewport, with a maximum of 1000px. The paths are in the DOM as SVG's so they are also sized like the rest of the elements. If your viewport is less then 1000px everything will scale down in ratio including the animation path. Initially both animations are pretty good, sometimes the green box isn't as smooth (sticky at the top of the viewport) as I hope it would (sometimes it is a little "jumpy") be that is why I created pink box that is pinned and thus perfectly sticky at the top. Then when the viewport is scaled up or down both animations need to be invalidated because the recored values do not match the newly scaled pixel size. Whether the invalidate is done automatically or manually the result is the same, the green box will follow the correct new path but with the same issue as before that it is not perfectly stuck at the top and the pink box has an offset after the first tween. https://codepen.io/jaap-maglr-com/pen/BabWZOr I think this demo clarifies my use of the invalidate method and I hope that you can put me in the right direction so that one of the solutions is both stuck at the top and has a resizeable path.

Invalidate() does the trick, however there is something that I can't wrap my head around. In the following demo you will see that I have created an animation that sticks the green box to the top of the window and only translates x. We use this to, for example let a car follow a road or roll a marble down a pipe or track. The white borders mark the points that green box will pass on the initial scroll and all is great until we call the invalidate function after window resize (in the demo we call it on button-click). The result is that the first tween still ends up on the white border box but tweens after that have an offset (translate-y). How can I achieve that all tween will have the same result as before the invalidate? https://codepen.io/jaap-maglr-com/pen/qBvRRGm

Hi Rodrigo, Thanks for the quick reply, after some tweaks to make it work in my own situation I think your solution is the better approach. So instead of killing and rebuilding all animations just let the specific motion paths update. A thing to note is that the align property is really important to make the resizing work, without it the motion path doesn't change. Thanks again.

Hi everyone, I am wondering how i could tell an animation that uses the MotionPathPlugin to update its path after the window is resized. After some searching I have found that the suggested method is to kill and reinit the animation (like in the demo). In my case that causes a lot of overhead because I have a lot of animations (that might be nested) that are all relative transforms based on EM except for the motion paths that only accepts / translates to pixel values. Is it possible to only tell the animations that use the MotionPathPlugin to get their new path by reading the resized SVG or by suppling a new path (array, string, etc.)? Thanks in advance.

Customers are using our platform to create interactive magazines. Inside our editor they have the option to create all sorts of designs with animations using GSAP (version 2.1 at the moment) in the back-end. Example: https://magazine.vanoord.com/en_US/18338/ These pages are presented in a publication interface. A visitor can click through a publication page by page. We are preloading these pages, adding these to the DOM and initialising the specific animations used on that page. We are busy changing our platform set-up, because of these changes we are now encountering more visible problems with reflows created by the initialisation of the animation timelines. Attached a screenshot of the Chrome performance test. The red marks show 'forced reflow' problems. We are known what is causing a reflow, but are there any best practices, next to updating to version 3, how these scenarios can be improved with GSAP? Thank you.