.jpg.fb1a40cf0511df95e33926a34c464b14.jpg)
OSUblake
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by OSUblake
-
.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
Animating through elements... (not as simple as it sounds)
OSUblake replied to norrisollie's topic in GSAP
I'd just do a recursive function call to reorder the cards and start again. Simple example.... https://codepen.io/osublake/pen/a5d8def52e58227c738898c4d01e774e -
Anything that uses jQuery for selectors and creating animations setTimeout/setInterval would get my vote. setTimeout/setInterval has this wonderul effect when you switch tabs and come back 10 minutes later... 100,000 animations all starting at the same time.
-
You to need to wait for your fonts to load before splitting the text as the sizing will be different. https://stackoverflow.com/a/32292880/2760155
-
It works here. https://stackblitz.com/edit/angular-simultaneous-scrolltrigger-draggable-wcwbbk?file=src/app/app.component.ts
-
Does getting rid of SplitText remove those errors? And can you console.log SplitText out? It seems like if SplitText wasn't loading correctly, you get an error saying it couldn't find the constructor or something like that.
-
Hard to say. Does it show any build errors on AWS?
-
Just put the width and height in a separate animation. var scaleIt = gsap.timeline({paused: true,reversed: true}) .to(viewBox, { motionPath: { path: [ { x: 100, y: 220, }, ] }, duration: 1, ease: "none" }) .to(viewBox, { ease: "none", duration: 1, width: 500, height: 200 }, 0)
-
Seeing as they are using a canvas element, those images are probably for a shader (WebGL).
-
Now try it with a motion path. const viewBox = document.querySelector("#svg").viewBox.baseVal; gsap.to(viewBox, { motionPath: { path: [ { x: 0, y: 150, width: 600, height: 2000 }, { x: 0, y: 450, width: 600, height: 2000 }, { x: 200, y: 770, width: 200, height: 2000 } ] } })
-
You can animate the viewBox, although I don't know if changing the width and height will throw off its positioning. const viewBox = document.querySelector("#svg").viewBox.baseVal; gsap.to(viewBox, { motionPath: { ... } });
-
What do mean load halfway? Like the page opens halfway down? You can always force the page to the top. document.documentElement.scrollTop = 0;
-
Unfortunately, there's no way to get the mouse position without a mouse event firing. You could try keeping tracking of the mouse position and using scroll events to manually update the position, but it sounds like it might get complicated.
-
Check out the installation docs. https://greensock.com/docs/v3/Installation?checked=core,customEase,customWiggle
-
I'm still a little unsure what all that nesting is for. https://codepen.io/osublake/pen/30231603235aa1915bb92311a048ef16
-
Have you tried making the box bigger?
-
Throw in a radius animation, and then you can change how big the circle is. The allows for the height of the wave to be dynamic. For example, it can start out small, and then get bigger, or vice versa. https://codepen.io/osublake/pen/edbed4a5ee29e65a49cc60f9868e7d7b
-
It's just a way to do circular motion, which is nice because of the way it repeats itself. However, I'm not doing the X movement, so it only moves up and down. This shows how to do X movement, Y movement, and how combining them makes circular movement. https://codepen.io/osublake/pen/a0076b0d032987820eab6f41bde10246
-
Love the split text addition! This is a good place to start. I've learned so much from his videos. https://www.youtube.com/user/codingmath/videos
-
I added my wave technique to Cassie's pen, so a little more complicated. I also added in the direction detection, so the wave starts on the side of the button you hover over. https://codepen.io/osublake/pen/388bae8d0f760b3e16887d63cfc10a29
-
There's just a delay for stuff that React renders, like say the text inside an element. resize events happen outside of React, so there shouldn't be any problem.
-
Hard to say without seeing it in context, but I don't see why it would be a React issue if you have reference to the element.
-
This is the basis for a wave. Try playing with different values here... var delay = norm * 1.5; tl.to(obj, { angle: Math.PI * 2, ease: "power2.inOut", duration: 3 }, delay); https://codepen.io/osublake/pen/eb9ad45d903c076f2c47ee1ea3981b2a
-
Physics2D restart animation with different (random) velocity/angle
OSUblake replied to jakob zabala's topic in GSAP
Here's a start. https://codepen.io/osublake/pen/2875503ec594830f0a2cd6766cf5bf41 -
Here's how I've handled different enter and leave animations. Pretty simple, just keep track of whether it's hovering or not, and if an animation already exists. It shouldn't jump as every animation will play all the way through. GSAP - hover enter/leave effects on multiple targets (forEach) (codepen.io)
-
Yes, it's already tracking it because of the draggable. If you're not using draggable, you can get it like this, which is what @Rodrigo showed. It still works the same. // returns an array const tracker = VelocityTracker.track(slider, "x")[0]; const tracker = InertiaPlugin.track(slider, "x")[0]; tracker.get("x");
