studioalloy
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by studioalloy
-
-
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.
See the Pen MWVoKJQ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen
I’ve also tried moving the elements to a div in the middle of the screen, but that also failed.
See the Pen JjLJXYd?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen
-
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.
See the Pen OJvmeZL by mvaneijgen (@mvaneijgen) on CodePen
-
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.
See the Pen wvozqJa?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen
-
@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
See the Pen LYbZwyM?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen
QuoteSome side notes: ..
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?
See the Pen OJbXqxd?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen
-
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
See the Pen oNxqeLw by mvaneijgen (@mvaneijgen) on CodePen
-
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
See the Pen wvGmvWr by mvaneijgen (@mvaneijgen) on CodePen
-
1
-
-
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)
-
Yeah I was starting from scratch and the same settings got me different results that is why I set it to `.from()` instead of `.to()`
I see you also changed my `y: "100%"` to `yPercent: 100,`, why is that because with my original `y` the building just disappears. https://www.diffchecker.com/M2bbwxxr
Letting the transform being handled by GSAP is a good idea, but I usually first build the layout before I do any animation. What will the impact of the performance be if the transforms are already being set?
I swear I tried that last one, but it didn't work for me. I do however had set the `scrollTrigger` object on the elements it self, but that didn't work. Also how do you need to see this timeline, because if I visualise a normal animation on GSAP I visualise a timeline which is being played one after the other. if I see your example I would say the building scrolls down first and after that the clouds, but I want the building and clouds play at the same time and if they are both done have the ground disappear, would than adding a custom label to the timeline work? This is just to better understand the way it works. (just tested it and that is exactly how it works!)
```
parallaxTL
.to("header .svg-group .building", { y: 100 }, "sameTime")
.to("header .svg-group .clouds", { y: 200 }, "sameTime").to("header .svg-group .foliage", { scale: 0 })
```
-
I'm trying to translate the animation I've build using GSAP and ScrollMagic to just use the ScrollTrigger library from GSAP it self. I thought this would be straight forward, but I'm not getting the same feel and also having multiple items trigger at the same time is not working
Here is where I'm at (the clouds should also move down):
See the Pen XWXrLNz by mvaneijgen (@mvaneijgen) on CodePen
The ScrollMagic version:
See the Pen abvgBEK by mvaneijgen (@mvaneijgen) on CodePen
-
@ZachSaucier I was implementing your suggestions and I think I've found another bug, but now in macOs Safari 13.0.5 (15608.5.11) if the items are fixed I can drag them fine in Safari
See the Pen VwLpyva by mvaneijgen (@mvaneijgen) on CodePen
But if the container is fixed and the items absolute in there I can't drag them
See the Pen VwLpyva by mvaneijgen (@mvaneijgen) on CodePen
This happens in both versions of the plugin
https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.0/Draggable.min.js
-
1
-
-
@GreenSock seems to work great (looking forward to the next release)! @ZachSaucier thanks for the tip I'll look in to that. It is always better to optimize your code, even if it is just a little.
See the Pen rNVywNY by mvaneijgen (@mvaneijgen) on CodePen
-
I'm trying to create a menu that floats on top of the page (fixed) with each page reload having it them position differently. This is of course really annoying, but you can drag the items to a position of you choosing.
But after you've scrolled the page and try to drag the items they disappear (I think, they think they're still at their original (absolute) position), but am not sure.
I've found a topic that also talks about fixed postion elements, but that is about a rotation and doesn't really talk about solutions, just new versions of the Draggable Plugin https://greensock.com/forums/topic/19771-misbehavior-of-draggable-knob-while-in-fixed-positioned-context/
There is also nothing in the docs about dragging fixed elements https://greensock.com/docs/v3/Plugins/Draggable
See the Pen NWqdZxb by mvaneijgen (@mvaneijgen) on CodePen
-
Fixed the issue: My `transition-timing-function: ease;` css rule was the culprit. How can I still ease on hover and use the GSAP ease function
I was working on a Nuxt.js app, and I can't seem to get my eases working, so I opened up a code pen, but even in there, the ease seems to just be ignored.
If I downgrade the CDN link to `3.0.1` something seems to be easing, but it doesn't look great. Do eases need to be imported?
See the Pen dyPpbKj by mvaneijgen (@mvaneijgen) on CodePen
-
Fixed my on issue, while debugging more. I had copied the code form a
.staggerFromTo()-
1
-
-
.staggerFrom( "#DienstWebsite #phone #phone-header-text *", baseTiming, { drawSVG: "0%" }, 0.1, `-=${baseTiming * 4}`, // ? culprit )
I have the follow code which seems fine to me, but I get the following error in my console
Uncaught TypeError: callback.call is not a function at TimelineLite.push... While inspecting the code and removing all these types of timing functions, the error goes away. I've also tried the non ES6 version to get a variable in the Position Parameter, but with no luck."'-=" + baseTiming * 4 + "'".Is this just not possible? I like my timings always to be a multiple of my base timing and having this calculated by Javascript seems like a smart plan.
-
-
@mikel thanks for the response. I clearly do not understand the syntax, because setting the path to `100% 100%` and then go to `100%`. Fix the issue for me. Here is the full code.
```.staggerFromTo("#text *", baseTiming, { drawSVG: "100% 100%"}, { drawSVG: "100%", stagger: 0.2 }, 'sameTimeTwo')```
The only thing now is to start the two (text layers) too animate at the same time. The new `stagger: {...}` syntax want something else from me, but I can't find anything in the docs.
Codepen updated to old stagger syntax an that works.
Move elements to a specific point within a SVG
in GSAP
Posted
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
See the Pen bGvrrQg?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen
❌ Move to the square (#toHere) of the #center element
See the Pen ExEvvGO?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen
✅ I can however move them to the center of the SVG
See the Pen YzaxxJK?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen