trusty97
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by trusty97
-
-
Ah ok I was afraid that might be the case 🙂 but thank you for the quick response!
-
Hi there,
I'm currently using ScrollTrigger with toggleActions to scrub an animation while it moves along the ScrollTrigger, and I'm using
toggleActions
to attempt to only have that animation play only when entering, and then reset and play again after you scroll up past the start again (onLeaveBack). The in-between states should simply show the completed animation state until you get back to onLeaveBack.I thought that this could be accomplished via
toggleActions
, but I'm noticing that if I usescrub
the animation still scrubs back and forth, seemingly ignoring any options passed totoggleActions
.I know I could do this manually using
onUpdate
to progress the item manually, but then I lose the ability to givescrub
a valuescrub: 3
. Maybe I'm misunderstanding thetoggleActions
option? I'm attaching a very simple codepen to illustrate the issue.See the Pen ExLmOwJ by pdnellius (@pdnellius) on CodePen
-
That worked!
For anyone looking for example code with the solution in place, see this codesandbox:
https://codesandbox.io/s/dreamy-rain-lv0td2?file=/src/App.js- 1
-
I'm having an issue using
ScrollTrigger.normalizeScroll()
with a scrollable div. I enabledallowNestedScroll: true
but it seems as though the page scrolls a bit whille scrolling the nested area. A simple example is available here:https://codesandbox.io/s/blissful-jones-6tz35t?file=/src/App.js
You can see when
ScrollTrigger.normalizeScroll()
is enabled, it will scroll slightly along with the nested scroll area. I'm seeing this in Chrome 103.Am I handling this incorrectly or is there another way to get only the nested area to scroll?
-
It appears as though the
ease
property does not accept a function returning a default ease string (such as'power4.out'
) as a value. I know there is language around it accepting a "function that accepts a progress value between 0 and 1 and returns a converted, similarly normalized value" but it'd be great if I could use a function to return a preset easing value based on some condition in the browser (such as resizing the window).Condition:
gsap.to(el, { ... ease: () => (condition ? 'power4.out' : 'none', ... }
Expected:
Preset easing value set based on ternary function.Result:
GSAP tween breaks and no longer works.
I've included a codepen that demonstrates this not working. Is there any way to do this? Any thoughts here are greatly appreciated!
See the Pen GRQpRKW by pdnellius (@pdnellius) on CodePen
-
Yes! Thank you!
-
@Visual-Q still not quite there. The box should un-pin itself once the top of the footer reaches the bottom of the viewport.
-
@Visual-Q unfortunately, this is still not what I'm looking for.
- The box's opacity should go from 0 to 1 starting when the top of Area 3 reaches the center of the viewport. Additionally, box should be pinned vertically center within the viewport at this time
- The box should un-pin once the top of the footer hits the bottom of the viewport
-
@Visual-Q apologies for that, almost what I'm looking for.
- The first trigger animates the opacity of the box within area 3 only, and should finish animating opacity by the time Area 4 reaches the viewport.
- The second trigger was intended to pin the box in the center of the screen when the top of Area 3 reaches the center of the viewport and unpin once the top of the footer reaches the bottom of the viewport.
-
Hi there,
i'm having trouble with absolutely positioned vertically centered content using
top: 50%; transform: translateY(-50%)
along with pinning using ScrollTrigger. The.box
should be vertically centered (it's currently hanging at the bottom of the screen), and if you disable SrollTrigger's pin, you'll see that the item is vertically centered within that section. I'm including a codepen that demonstrates the issue. Anyone have any tips?See the Pen JjEdBJR by pdnellius (@pdnellius) on CodePen
ScrollTrigger, toggleActions, and scrub not working as expected
in GSAP
Posted
Thinking a little more on this... what if I used a piece of state to switch
scrub: true
toscrub: false
usingonLeave
, then reset it to trueonLeaveBack
? Is there a way to make that work?See codepen for a modified example (that does not work):
See the Pen ExLwewJ?editors=1111 by pdnellius (@pdnellius) on CodePen