studioalloy

Ah, my bad. I thought I had really simplified my demo already, but of course what is simple for me doesn't mean it's simple for someone who is looking at it for the first time. Yeah I knew I had some issues, that is why in my first example I had listed all possible combinations, but I had commented them out, so I could easily switch between. I see now what I was doing wrong. I need to calculated the location after the animation has played! I've fixed all the issues I could find and simplified the demo even more, but still I can't get them to move to some other element within the SVG. I'm however am able to move them to the center of the SVG and I can't figure out why the other options aren't working. ❌ Move to the #center group <g> element https://codepen.io/mvaneijgen/pen/bGvrrQg?editors=1010 ❌ Move to the square (#toHere) of the #center element https://codepen.io/mvaneijgen/pen/ExEvvGO?editors=0010 ✅ I can however move them to the center of the SVG https://codepen.io/mvaneijgen/pen/YzaxxJK?editors=0010

That seems like the perfect candidate. I had watched the video when it came out, but completely forgot about it. There is only one issue... I can’t seem to figure it out. I’ve watched the YouTube video a few times now, but it just seems to not work. I’m wondering if you need to do something different when working with SVGs? Sorry that my demo changed, but to use this feature with my original question I need to modify the SVG, but before I do that I wanted to understand how this feature worked. So in the same animation I want to do something similar, eg move all the people on the island to the middle element (ampersand/&) and for this I didn't need to modify the SVG. Here is a pen where I’m trying the different functions with either relative coordinates - + or not. I’ve also tried to move the the middle of the SVG instead of the ampersand <g> element. Everything has comments to easily toggle between different settings. I can seem to move people to the same spot, but not the middle & and the location differs between islands. https://codepen.io/mvaneijgen/pen/MWVoKJQ?editors=0010 I’ve also tried moving the elements to a div in the middle of the screen, but that also failed. https://codepen.io/mvaneijgen/pen/JjLJXYd?editors=0010

I have these three group elements that need to move from there current position to somewhere in the middle and bounce of each other a few times. This is part of a larger timeline, but I’ve created a demo, with just that part. In the past I’ve done this by hand, just keep tweaking the values until it feels right, but I was wondering if there is a smarter way? I was maybe thinking of creating fake elements that will be position touching eachother and using the Flip plugin to move the corresponding element to that position. Right now I use `.getBBox()` to move the elmeents to the middle of the SVG from the respecvive position, maybe there are some magic number that would also do what I want. As a side question I was wondering if it would be possible to move any element within a SVG to a specific coordinate of that SVG no matter what the transforms are of the parent group element. Now when writing this I think I’m describing the Flip plugin, but I don't see how I could make that part of a larger timeline. This animation happens somewhere in the middle of a larger timeline.

Back to `overwrite:` ! That was what I was looking for! But then I don't get why my frist pen didn't work, there I had `overwrite: true` and it was in a timeline instead of straight up `gsap.to()`. I had it also `scrollTo:` the element on click, maybe that is the culprit? But I've modified your pen and everything seems to work fine. https://codepen.io/mvaneijgen/pen/wvozqJa?editors=1010

@ZachSaucier I want ScrollTrigger to scale the elements and on click the element should scale to 100%. If I want the click 100% scale to happen I have to `.disable()` the SCROLL scrollTrigger otherwise it will overwrite the scale. Another scrollTrigger should then check if you `onLeave()` or `onLeaveBack()`, then it should scale back to some magic value and the SCROLL trigger should enable again. In the end I also want to have a close button, with scales it back from 100% and enables the scroll animation again. I've also made a screen recording explaining my issue in more detail: and the pen https://codepen.io/mvaneijgen/pen/LYbZwyM?editors=0110 Fair enough, but I'll start optimising code when I got a working version.

Took a while, but I'm back at it again. The two ScrollTriggers work, but now I want to animate back to the `scale` it was before I clicked. Right now I could set it to the max leave value (eg `scale: 0.6`), but that only works if you scroll away (down, it still pops a bit right now when the SCROLL trigger instates), but when you click on it again it also needs to `scale` back to the value it was on that scroll position. Is there some ? magic value I could set the `scale` to? https://codepen.io/mvaneijgen/pen/OJbXqxd?editors=0010

I don't know if I have the same issue, but I had created a template (two months ago or so) for myself from which I start new projects. I had followed the Yarn installation guide and everything works great. Now I found that I also version controlled my `yarn.lock` file which keept installing GSAP 3.5.1. In this particular project I've updated GSAP `yarn upgrade gsap` (to 3.6.0), but now I get this error while `import { gsap } from 'gsap';` I've changed nothing else in my project. https://gist.github.com/mvaneijgen/03a40d98d901cacb114c63e7e9dd0dd7 Has something changed from 3.5.1 to 3.6.0 with this way of using Yarn and authtokens?

So, on click kill all ScrollTrigger's then scale to 100% and create a new ScrollTrigger (that does no animation). And that one has two hooks: on leave and leaveBack, that then kills it self and reinstates all previous ScrollTrigger's that where killed by the click? Seems a lot more complicated than `overwrite: true`, which if it would work does everything above, but with one line of code. Why doesn't overwrite work? Are there plans to make it work in combination with ScrollTrigger?

I'll try it out. I'm not working on this particular project to day, so I was writing down some notes for later. No files are needed, I'll keep an eye out for the update, the site is still in development so I can live with this bug for now.

How do I overwrite scrollTrigger with an other timeline that also scrollTo the element on click, but keep the scrollTrigger alive to use the `onLeave` trigger? I have a page with videos and on scrollTrigger enter the videos should play and scale a bit (✅ working), but then when the user clicks the video should scale to 100% (❌ not working). I've set the property `overwrite: true` on the time line, but that doesn't seem to work in combination with scrollTrigger. In my demo you can see an orange box that scales to 100% on click, the video tries to do the same, but is taken over by the scrollTrigger timeline which I want to overwrite. I've tried killing all the scrollTriggers, but I need the `onLeave` trigger for when the user scrolls away again, so I can scale the video back and pause the video

Wauw. That sounds weird. I was debugging myself, but I since have made so many forks of this pen and didn't understand why some are working, but others not. What a find. So if I give the container a offset with `padding` or `top`, `left` it would also fix it for now on my production site where I import gsap from NPM?

Is it me or is this issue back again in the latest version? https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/Draggable.min.js https://codepen.io/mvaneijgen/pen/wvGmvWr

I've tried something and fixed it. I don't know how, but the redirect is fixed.

Have just removed any mention of CustomEase from my themes and still get redirected to this page. I've also search both themes for `cdpn`, `codepen`, but nothing comes up. the site is https://alloy.work/zuidwester

I have a website where I just pushed to the staging environment and get the following message (see attachment) I've just downloaded the minified version from my account and put it into my head (for now because I'm still testing) (sidenote: the rest of GSAP is being included via Bower, in the parent theme of a Wordpress site, CustomEase is in the head of of the child theme, latest version just downloaded it)