PointC
-
Posts
5,070 -
Joined
-
Last visited
-
Days Won
411
Community Answers
-
PointC's post in Clipping mask problem in animation was marked as the answer
When you're clipping an H1 separate from the SVG, I'd recommend just using a container div for the H1 and setting overflow to hidden. Something like this:
See the Pen EMOwaO by PointC (@PointC) on CodePen
Just a few other notes:
You could save a lot of JS if you apply a common class or select an array of groups to apply your autoAlpha set(). Currently you have 20 identical set() tweens in a row. I'm not sure setting the autoAlpha:1 is necessary as that would be its default state. No need for <body> tags in the HTML panel of CodePen You can load scripts via the little gear icon on the JS panel rather than pasting the script tags in the HTML panel
Happy tweening.
-
PointC's post in How do I capture the initial value of an item? was marked as the answer
Here's a quick demo with a loop through the targets and creating a simple timeline for each. Then we add the enter/leave listener to play/reverse the timeline on hover.
See the Pen rNqbOxm by PointC (@PointC) on CodePen
Happy tweening.
-
PointC's post in MorphSVG - How to reinstate an effect after it's use in a reusable function. was marked as the answer
Yep - the relative value on each iteration is the culprit here. There are a few ways to solve it, but I think the easiest is just to set the lines back to 0 after they fade out. Add this to the end of the timeline in the clearData() function and you'll be good to go. You also won't need relative y values on the tweens in that function with this change. Just y:20 will work perfectly.
tl.set("#para-long-line, #para-short-line", { y: 0}); Happy tweening.
-
PointC's post in Inner Overflow Section Scroll Feature was marked as the answer
From your description, it sounds like you need to wrap that scrolling block of text in a parent container and pin everything while it scrolls. Here's a fork of your pen.
See the Pen qBJKzLo by PointC (@PointC) on CodePen
Hopefully that helps. Happy tweening.
-
PointC's post in Animations only visible in a div was marked as the answer
1. Yes - that's usually accomplished with overflow:hidden.
2. Yes - but remember zIndex only applies to positioned elements.
-
PointC's post in Incremental animation issues on quick button clicks was marked as the answer
You could check if the target is is tweening and ignore the clicks.
https://greensock.com/docs/v3/GSAP/gsap.isTweening()
Or give the tween a reference, say 'spin', and then force the progress to 1 if the user clicks too quickly and spin is still active. So the code would be something like this.
if (spin && spin.isActive()) { spin.progress(1); } https://greensock.com/docs/v3/GSAP/Tween/isActive()
Hopefully that helps. Happy tweening and thanks for being a club member.
-
PointC's post in Two scrolltiggers applied to an array of items was marked as the answer
y transforms with the element you're using as the trigger can be a little confusing. Especially with two ScrollTriggers on the same element. IMHO it would probably be easiest to use a parent element around your .events and use that as the trigger. That way you're not animating the actual trigger element. Something like this should work.
See the Pen VwEGVLK by PointC (@PointC) on CodePen
Hopefully that helps. Happy tweening.
-
PointC's post in SVG line showing before animation starts with DrawSVGPlugin was marked as the answer
Just a bit of FOUC. This should help.
Happy tweening and thanks for being a club member.
-
PointC's post in GSAP numbers roundup on timeline was marked as the answer
snap: { textContent: 1 }
See the Pen 10c8677689d49df47fe1e690eca483cb by PointC (@PointC) on CodePen
Happy tweening and thanks for being a club member.
-
PointC's post in With GSAP SplitText, how to animate the words of each line in the same time ? was marked as the answer
You'd need to loop through each line and select the bottom/top .char in those lines and start all tweens at 0. Something like this.
See the Pen b300c7bf37ea7a9567e1733d87bbbe30 by PointC (@PointC) on CodePen
Just FYI - you had an ease on the timeline itself, but timelines don't have eases. I moved that power4.inOut ease to the defaults for the timeline so it would be applied to each tween.
Hopefully that helps. Happy tweening and thanks for being a club member.
-
PointC's post in ScrollSmoother image height calculation for data-speed was marked as the answer
I don't follow what you're asking. Are you talking about a parallax effect. If so, you want the child larger than the container and set the speed to auto. From the docs:
"auto" speed
When you set the speed to "auto", it will calculate how far it can move inside its parent container in the direction of the largest gap (up or down). So it's perfect for parallax effects - just make the child larger than its parent, align it where you want it (typically its top edge at the top of the container, or the bottom edge at the bottom of the container) and let ScrollSmoother do its magic. Obviously set overflow: hidden on the parent so it clips the child.
If that's not what you meant, could you please provide a minimal demo? Thanks and happy tweening.
-
PointC's post in Can't recreate the animation with the latest GSAP version was marked as the answer
I think this thread can help you. Happy tweening.
-
PointC's post in How can I get this stagger repeat right? was marked as the answer
Probably easiest to give each element its own timeline.
See the Pen c45220bb9477f7805ca8c1ee07ae859a by PointC (@PointC) on CodePen
Hopefully that helps. Happy tweening.
PS I'd recommend animating y instead of top for better performance.
-
PointC's post in X position and transform-origin relation was marked as the answer
Transform (scale, rotation) default points are in the center of HTML elements. Translation (x/y) is top left.
If you want it to be in the center, try this.
gsap.set(".box", { xPercent: -50, yPercent: -50 });
-
PointC's post in Image mask query was marked as the answer
You'll need to target the rectangle in the clip-path rather than the clip-path itself. This seems to work correctly in Safari for me.
See the Pen vYVrYeV by PointC (@PointC) on CodePen
Happy tweening.
-
PointC's post in Stuttering when using ScrollSmoother was marked as the answer
Does adding this make any difference?
#smooth-content { will-change: transform; } Happy tweening.
-
PointC's post in When I execute method `to`, method `from` fails, how do I fix it? was marked as the answer
That's happening because your 'disappear' tween ends with an opacity of 0. Then you click the 'show' button which is a from tween, but it tweens from 0 to its current value which is also 0 so it appears nothing is happening. Probably best to use a fromtTo() tween if this is the way you want to wire this project.
https://greensock.com/docs/v3/GSAP/gsap.fromTo()
Happy tweening.
-
PointC's post in Text animation which can increase the opacity of text from left to right. was marked as the answer
Yes. Probably a few ways to go about it.
Use split text and animate the characters or words opacity value. Use an SVG and animate a mask over the text targets. Use a div over the top of the text which has the same color as the background and a low opacity. Then animate the div on the x axis.
Just a few thoughts off the top of my head.
Happy tweening.
-
PointC's post in SVG animation was marked as the answer
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.
See the Pen 1e25b266f580040a4f6a7cdca25f38f0 by PointC (@PointC) on CodePen
Happy tweening.
-
PointC's post in Apply same tween to class elements was marked as the answer
Sounds like you're trying target the y attribute. Please give this a try:
gsap.to(".bars", { attr: { y: 250 } }); Happy tweening.
-
PointC's post in unblurring text filter with ScrollTrigger was marked as the answer
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.
-
PointC's post in Repeat animation without setInterval was marked as the answer
Hi @tilohi8071
Welcome to the forum.
If I understand your desired outcome correctly, I'd tap into random and repeatRefresh like this:
See the Pen eeadbc4fec40ac5924627de100a06d19 by PointC (@PointC) on CodePen
Hopefully that helps and welcome aboard.
-
PointC's post in Hover on buttons was marked as the answer
Switch your buttons to inline-grid and make sure you're selecting the actual span and you'll be good to go.
See the Pen e1b1174eaaf3a0f188ea8896a7c19127 by PointC (@PointC) on CodePen
Happy tweening.
-
PointC's post in Append circle to SVG ID was marked as the answer
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.
See the Pen ddabccb18ac315841327a88a7a5c338c?editors=1010 by PointC (@PointC) on CodePen
-
PointC's post in GSAP set pause when unhover was marked as the answer
I'd probably add a small delay on the "reset" tween and set overwrite to true. Something like this:
See the Pen 364a470e414172b8fbd6a7420de056f6 by PointC (@PointC) on CodePen
More info about overwrite.
Happy tweening.