amit95
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by amit95
-
-
Hi @Rodrigo - Applying
opacity: 0
via CSS worked for me. But out of curiosity, would you know why applying the opacity withinfrom()
doesn't work? -
I have some cards to which I've applied a
clip-path
via css in order to hide them. Idea is that on scroll, these cards will reveal.However, with my current implementation, the cards do not appear once past the markers. Upon inspect, the opacity of the cards still remain as 0.
I've had a play around with
toggleActions
, but nothing I've implemented changes anything. I can't see any logic issues with myto()
andfrom()
either?See the Pen MWXOaWQ by amit_rai95 (@amit_rai95) on CodePen
-
@GreenSock - I assumed it was a GSAP related question, i.e. maybe something along the lines of
gsap.set(".cursor", {scale: 0 });
(which didn't work for me).However, that's fine, appreciate the help anyway 👍
-
Hi @GSAP Helper,
My above list isn't a list of requirements I'm looking for solutions to per se (not expecting someone to build it out for me). That was just a pseudo map of how I'm trying to get my animation to work.
I've provided two minimal demos in the question.
- The first Codepen showcases my existing approach to how I'm showing two elements at a time (by translating them up and out). I put this demo in as I'm trying to explore making 2 text elements animate in together (like in the video I've posted above) rather than animating them up separately, as it is currently. I thought there may be something simple I can tweak in this demo to make it work as it does in the video.
- My second demo showcases the use of batch to stagger the elements. But my question in relation to this was that the animation starts before the section has pinned and the demo showcases this.
-
@GreenSock - Wasn't aware of of quickSetter(), thanks for mentioning them.
In regards to your demo, the
cursor
only scales to 1 onmouseenter
. This does resolve the issue of the cursor not appearing when the page is refreshed and the users mouse is outside of the window. But, let's assume a user clicks refresh, then immediately moves there mouse into the window. The custom cursor would be scale: 0 because themouseenter
didn't technically happen.If the user then moves there mouse out of the window, then back in, then the cursor appears as it should.
-
I have a simple custom cursor which I don't want displaying until the users mouse is within the window.
In my demo:
- If you run the pen (and are outside of the demo window), you will see my custom cursor appear in the top left of the window.
- Then, when you bring the mouse into the window, the custom cursor works fine
- When you take the cursor out of the window, the cursor scales down correctly also
I have tried setting
gsap.set(".cursor", {scale: 0 });
but this doesn't work.How can I get the cursor to not display on page refresh, until the cursor is within the window?
See the Pen RwyXmbj by amit_rai95 (@amit_rai95) on CodePen
-
I have an animation which should work like this:
-
.pinnedBgText
is hidden by default. When the section is in view, theclip-path
ScrollTrigger starts. -
The
clip-path
animation finishes as the.pinnedBgText
pins -
The
batch
stagger animation for.pinnedBgText__text
starts when.pinnedBgText
has pinned -
Only 2
.pinnedBgText__text
items should show at one time. Then on scroll, show the next 2 (2 text items should always be visible). I'm trying to achieve a reveal animation like this: https://imgur.com/AjyZt8V
Currently:
-
My batch animation begins when the section hasn't pinned yet. I have tried
start: "bottom"
, but this breaks the animation. - I'm unsure on how I should approach item 4 in the above list.
In a previous demo, I have each text element translating up. However, now I'm looking for 2 items to reveal, then on scroll, two more animate up (like in the video above).
See the Pen BaxXBwg by amit_rai95 (@amit_rai95) on CodePen
Suggestions on how I can go about this?
See the Pen JjvgZjE?editors=1010 by amit_rai95 (@amit_rai95) on CodePen
-
-
This is a bit of an experimental question, as I haven't seen any questions like this on the forum before (and this is the only sub-forum I thought it's best posting on, as the other is in relation to banner ads).
I'm looking for inspiration on alternative ways I can go about doing this sort of animation.
In short, below is a demo on how my animation is currently working. It showcases two text elements, and on scroll reveals another (whilst hiding the top text item, so only two text items are visible at the same time). I'm not a fan of the way this works and wondering if anyone has any ideas on how I can "jazz" it up a bit more, as it seems a bit static to me currently.
I was initially thinking along the lines of scrolling to that section, and having the text element zoom in, but unsure on how that would would with two text elements.
Any ideas would be appreciated / apologies in advance if these types of questions are not permitted / the purpose of this forum.
Edit:
Another possible approach would be so load 2 text items in a set. Something like this: https://i.imgur.com/AjyZt8V.mp4
Is there a demo or something similar to this anywhere? Couldn't see anything similar in the ScrollTrigger demos, or the codepen libraries.
See the Pen BaxXBwg by amit_rai95 (@amit_rai95) on CodePen
-
Hi @Rodrigo,
I may have explained it poorly in my question, so apologies in advance.
After the yellow logo has animated in, I'm trying to reverse that animation on exit and then fade the white logo back in. So to clarify (as I missed mentioning these details previously):
- User lands on page and wait 5 seconds
- The white logo fades out and the animation for the yellow logo animation starts
- The yellow logo remains visible for 3 seconds
-
The yellow logo animates out the opposite way it animated in (
logoTl.reverse()
) - The white logo fade back in
- 5 second timer resets
- Back to step 2
- Repeat
-
I have a simple logo animation which executes every 5 seconds (for demo purposes).
Here's how I'm trying to make the animation work:
- Wait 5 seconds
- White logo fades out and yellow logo animation executes
- Then the white logo fade back in
- 5 second timer resets
- Back to step 2
- Repeat
I'm essentially after something equivalent to
reverse()
See the Pen PoexoQY by amit_rai95 (@amit_rai95) on CodePen
-
I have an animation which works based on data attributes, allowing it for global use (I believe I saw this demo somewhere in the docs, but can't find it).
Nonetheless, I have in my demo applied these attributes to 4 sections. The parallax looks to be working on the first element, however, they move outside of the element on subsequent elements.
The issue seems to stem from the
y
positioning:y: (i, el) => -(1 - parseFloat(el.getAttribute("data-speed"))) * ScrollTrigger.maxScroll(window)
Consider the first section the demo that looks to be working. For that section:
-
-(1 - parseFloat(el.getAttribute("data-speed")))
is equal to -0.2
-
ScrollTrigger.maxScroll(window)
is equal to1167
-
-0.2 * 1167
= -233.4
However, upon inspecting the element, it doesn't look like it's translating anywhere near that value.
All I'm trying to achieve is a global script, where I can apply attributes and achieve a parallax effect where items move up subtly. Unsure why the elements move outside of its parent?
See the Pen PoevQVZ?editors=1111 by amit_rai95 (@amit_rai95) on CodePen
-
-
@Rodrigo - I was going crazy looking at the JS and alternative approaches for days 🥲
Always good to get another pair of eyes on blockers. Much appreciated. Can confirm, adding the
display
property resolved the issue.- 1
-
I have a simple section which contains extra large text. Two of these sections exist, one which is right aligned, and one which is left aligned.
On scroll, I want the right aligned header to move left (which works in my demo, so all good here).
The left aligned text however, I want moving right on scroll. This in my demo however doesn't work.
The
xPercent
is negative for the right aligned header, which allows it to move left. By that logic, I've got a positivexPercent
value for the left header, however, it doesn't make any movements?See the Pen XWqyYNr by amit_rai95 (@amit_rai95) on CodePen
-
I have an animation where on
mouseenter
, a logo animation plays. The way I'm trying to get this to work is:-
primaryLogo
is visible by default -
Users mouse enters
primaryLogo
-
primaryLogo
fades out -
secondaryLogo
animates -
Users mouse leaves
secondaryLogo
-
secondaryLogo
animates out (reverses) -
primaryLogo
fades back in
If a users mouse enters the default logo and then exits before the animation is finished, I still want the animation to play, reverse and go back to its initial state. Meaning once the animation plays, it needs to finish before restoring to original state.
To achieve this, I've tried:
tl.reversed() ? tl.play(0) : tl.reverse();
However, the animation then doesn't trigger.
A visual of the animation can be seen on
mouseenter
on the demo.See the Pen yLjvEvx by amit_rai95 (@amit_rai95) on CodePen
-
-
I have a simple reveal animation which reveals text. I'm using a library called Splitting.js to segment out each of the characters in the element in order to stagger them.
Sometimes, my animation works as intended, and in order instances, it doesn't. But it's never consistent.
Here is how it animates with the library active. On refresh, you can see that the titles opacity is still visible as it animates in.
Now, I'm aware that there's limited support here for queries involving third parties. As such, I've commented out all things to do with Splitting JS and ran the test again, with just the GSAP timeline, and this is how it performs:
The codepen shows how the animation should run. Title is hidden completely on load, then each character staggers in one by one. However, as mentioned, I have the exact same JS on my build and it sometimes works when you change page, sometimes it doesn't.
See the Pen abGpaWy by amit_rai95 (@amit_rai95) on CodePen
-
Hi @Rodrigo,
Appreciate the demo, the effect is what I'm after. However, when their are multiple cards present, the mask also reveals that area on another card.
See demo below. I assume this is because of the
if (overImage) {}
conditional statement is not targeting that specific.card__image-mask
element / a scoping issue?Additionally, when you hover over the card initially, and then scroll down or up, the cursor and circle that is opacity that is completely visible is off?
-
But that is the problem.
The
primaryLogo
should appear and is what triggers thesecondaryLogo
to appear. The flow is:-
primaryLogo
is visible -
Users mouse enters
primaryLogo
-
primaryLogo
fades out -
secondaryLogo
animates -
Users mouse leaves
secondaryLogo
-
secondaryLogo
animates out (reverses) -
primaryLogo
fades back in
-
-
I have a logo
SVG
which displays be default (this is the white logo.header-primaryLogo
).On
mouseenter
of this logo, I'm looking to:- Fade the default logo out
-
then play the
tl
animation (which then showcases the secondary logo.header-secondaryLogo
)
If you uncomment out line 15 from the CodePen (
position: absolute
from.header__logo
) and then hover over the white logo, you can see the animation is somewhat playing.What's not happing is that the default logo isn't fading out. Naturally I'm looking for the reverse on
mouseleave
.Any ideas why the animation isn't triggering completely on
mouseenter
?See the Pen yLjvEvx by amit_rai95 (@amit_rai95) on CodePen
-
I'm trying to go for an effect where an image has an
opacity
of less than 1. Then, when my custom cursor hovers over the image, that part of the image (that is visible via the custom cursor, as it has a transparent background), becomes fully visible.In addition to this, when the mouse enters and exists the card, it has a very jaggy entry and the on exit it almost blinks. I have the transitional conditions in the CSS, but it doesn't work as smoothly as you would expect. Is this a JS issue?
See the Pen MWGXMVP by amit_rai95 (@amit_rai95) on CodePen
-
@GreenSock - Of course The preview was more to showcase the issue in web form (rather than just a GIF). Will continue trying to emulate into a codepen.
In relation to GSAP versions, I did previously upgrade to
3.11.2
via npm, but encountered bugs (such as the one I posted about here).I know you have fixes in place for
3.11.3 beta
, but naturally this isn't available via npm yet, and I do not want to use 3.11.2 because of the bugs. So, I'm essentially waiting for version3.11.3
to officially be released so I can upgrade locally, via npm.Would you know when the official release would be?
-
Hi @GreenSock,
Believe me, I've been trying to recreate the issue in Codepen for a while, first time I cannot recreate an issue that is happening locally 🥲
I can confirm, I'm not loading anything dynamically, it's just a simple pin. I can also confirm the issue still persists on the new beta version.
The best way I can describe the issue, is that the markers for
.formBanner
ScrollTrigger moves before the.pinnedBGtext
section has unpinned.It's like the height of the invisible elements in the pinned module are causing the calculations to be off? Having said that, I have completely removed the text animation snippet from the pinned module, and the issue still persisted.
I will continue trying to get a pen up that shows the actual issue. However, in the meantime, if you'd like to see the issue on a webpage, please see here.
On the above page, you'll be able to see that the "start" marker has already moved up before the section has unpinned. The start marker should be on the
.formBanner
element.The JS on the webpage is the same as in the codepen demo (which is why I'm stumped on its mixed results).
-
Hi @GreenSock,
I can confirm it's all working for me in
beta version 3.11.3
👍Would you have any timeline on this versions official release?
-
Hi @Rodrigo,
-
I haven't looked into
devtools
yet, but will do. I couldn't find many threads on the matter (besides this), so assumed there must be something glaring I've missed / incorrect logic. Although, I have triedScrolltrigger.refresh()
on page load to see if it fixed it (it didn't) -
Good spot on the GSAP version. I was locally running version
3.11.0
, but have an older CDN version in my pen. I have now upgraded to3.11.2
and can confirm the issue still persists. - Regarding the conditional statements, they've always been in. These are part of modules / components and all of the JS compiles into one single js file. So, to avoid gsap element not found warnings, I'm checking if the element exists beforehand.
-
Regarding
anticipatePin
andendTrigger
, I followed this approach from this thread. Though, the anticipatePin property definitely doesn't make sense now that I see it.
No need to apologise, appreciate any advise given. I know the demo isn't helpful to showcase the issue, was more to gauge avenues as to why it isn't operating correctly on other envs.
-
I haven't looked into
-
I recently upgraded my
npm
package as I was running on version 3.9.1.Upon upgrading to version 3.11.2, my header animation doesn't work as it use to.
My 3.9.1 demo shows it in working order, where the header hides on scroll down, but shows on scroll up.
In the 3.11.2 demo, you will see that the header translates up immediately on load. The animation triggers on page load.
Is this a bug or am I missing something here?
See the Pen gOzzYxP by amit_rai95 (@amit_rai95) on CodePen
See the Pen ExLWzoR by amit_rai95 (@amit_rai95) on CodePen
Animations (linked by class name) execute together
in GSAP
Posted
I have a simple universal animation bound to the class
.fadeInUp
, which, as you can tell, makes content fade in up.The issue you'll see from my demo is that, the markers for
.text
do not pass the start marker, yet both content for the.hero
and.text
fade in up. Then, when you finally do scroll pastsection.text
, the animations for both re-trigger.The markers are correct, but it seems like all animations with the same class with re-trigger when you scroll past any element with that class?
See the Pen oNypXbp by amit_rai95 (@amit_rai95) on CodePen