PointC last won the day on
PointC had the most liked content!
PointC
Moderators-
Posts
5,142 -
Joined
-
Last visited
-
Days Won
417
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by PointC
-
Check out the callbacks in ScrollTrigger. https://codepen.io/GreenSock/pen/qBdeVJY Docs: https://greensock.com/docs/v3/Plugins/ScrollTrigger Depending on your needs, the Observer plugin could also be an option. https://greensock.com/docs/v3/Plugins/Observer Happy tweening.
- 1 reply
-
- 4
-
It's not working because it isn't there. Add that to your mouseLeave listener and it works just fine. https://codepen.io/PointC/pen/wvYrxbY/3359c5bf62e9674d1d54f4c84db96231?editors=1010
-
Couple of small things: You set your clip-path in your CSS to #myBoatMask, but it had no name in your HTML. You'll want to animate a child group of the group that is actually clipped. Make those changes and you should be good to go. https://codepen.io/PointC/pen/QWZqBrZ/1e25b266f580040a4f6a7cdca25f38f0 Happy tweening.
-
Jack beat me to it, but yep - DrawSVG makes that super easy. https://codepen.io/PointC/pen/BaKGyaa Happy tweening.
-
hmmm... that's a bit different than the first post was describing. I don't see any morph nor is the path changing during the animation. You could certainly do some calculations to drop the arrowheads into the correct positions, but since you're a Club member, I'd probably use DrawSVG and the MotionPath plugin together to get to the most flexible solution. Happy tweening.
-
x & y are attributes as well as CSS properties. Unless you put the y:250 in the attribute wrapper, GSAP will assume you want to animate the transform (translateY) which is what was happening in your demo. You wanted all the <rect> elements stacked on top of each other so you wanted to target the y attribute of the rectangles. It can be a little confusing with the overlap between properties and attributes. Bottom line, if you want to target a specific attribute, use the attr:{} wrapper. I'm not sure what you mean here. It could be as simple as setting up a repeat of 1 and yoyo:true. It would depend on the desired outcome. Happy tweening.
-
Sounds like you're trying target the y attribute. Please give this a try: gsap.to(".bars", { attr: { y: 250 } }); Happy tweening.
-
I'm pretty lazy so I think I'd approach this a bit differently. Using a small gap in the grid and a colored background div, you can fake the line drawing and all the calculations are taken care of by the CSS grid itself. https://codepen.io/PointC/pen/GRYmZmv It has some limitations and the top and bottom borders "pop" on, but that could easily be fixed by animating them separately. Just my two cents. YMMV. Happy tweening.
-
That thread was just to show you how to animate along a path that is changing during the animation as that's the tricky bit of what you're trying to do. Morphing a target object as it follows the motion path is fairly straight forward. Plop your morph elements into a group and have the group follow the motion path. Then you just need a separate tween on the timeline to handle the actual morph. Basic example. https://codepen.io/PointC/pen/ExdmaRr Happy tweening.
-
Sure, you can do all that with GSAP. I think this thread could help you. Happy tweening.
-
Yeah, I'd need to see a demo to offer any help. Just FYI - SVG clip-paths or masks work well for the invert effect, but you can also use CSS variables without a duplicate element like this demo. Just another option. https://codepen.io/PointC/pen/ZErvbPR
-
Please give this a whirl: gsap.to( {}, { duration: 0.5, onUpdate: function () { console.log(this.progress()); } } ); Happy tweening.
-
Stops by again and whispers *be lazy. use the MotionPath plugin*. Get your work done quickly and go for pizza. ?. YMMV.
-
Wow - is that @Shaun Gorneau dropping by with knowledge? Probably needed to dust off the old GS Mod Badge.
-
A couple similar demos from my archive that may be helpful. https://codepen.io/PointC/pen/ExVzqdm https://codepen.io/PointC/pen/pojmBKJ Happy tweening.
-
Hi @tilohi8071 Welcome to the forum. If I understand your desired outcome correctly, I'd tap into random and repeatRefresh like this: https://codepen.io/PointC/pen/JjmdvgQ/eeadbc4fec40ac5924627de100a06d19 Hopefully that helps and welcome aboard.
-
Your filter is applied to a parent div → .header-wrap2, but you're animating it to a blur of 0 on the child div with an ID of cattle. Target the parent and use px after the zero and you should be good to go. .to(".header-wrap2", {'filter': 'blur(0px)', duration: 1}); Happy tweening.
-
Switch your buttons to inline-grid and make sure you're selecting the actual span and you'll be good to go. https://codepen.io/PointC/pen/eYPOabg/e1b1174eaaf3a0f188ea8896a7c19127 Happy tweening.
-
Not sure if it'll help, but here are a couple of my old seamless demos using SVG. https://codepen.io/PointC/pen/wvpObWa https://codepen.io/PointC/pen/eYyKMWK/52ac38788ccdd84fc1eeaa3fcc9afa9e Happy tweening.
-
Name the group and target that instead of the SVG itself. Use insertAdjacentElement() to place it at the beginning or end of the stacking order. Here's a quick fork of my demo from above with that change. https://codepen.io/PointC/pen/abRoZeg/ddabccb18ac315841327a88a7a5c338c?editors=1010
-
I'm not sure I follow. Are you talking about groups? If so, you can append to the group just like appending to the parent SVG. You could also look at insertAdjacentElement() https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement
-
From what you're describing, I think creating one timeline and animating the timeScale would be the way to go. Basic example. https://codepen.io/PointC/pen/ExgExxL Happy tweening.
- 9 replies
-
- 3
-
- infinite repeat
- timeline
-
(and 1 more)
Tagged with:
-
Basic append to SVG element. https://codepen.io/PointC/pen/yLebyKv/48362b3142b2341213984f4b560b6c37 Happy tweening.
-
I'd recommend CSS variables to handle animating pseudo elements. Here's a basic example. https://codepen.io/PointC/pen/rNpXXWq Happy tweening.
-
This thread would probably be helpful for you: