Apnw2
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Apnw2
-
-
Thank your for your answer @akapowl 🙂
But honestly I don't really like the answer (😅) because it makes me pretty confused on how to properly solve different problems such as for example :-
In having a master timeline, we could easily keep track of it and for example kill it to recompute it on window resizing or on navigating through different pages. How to do such a thing if multiple ScrollTriggers are defined at multiple places in the code ?
- If some timelines share exactly the same ScrollTrigger part except that they have different scrub values or end values for example, I thought that we could avoid redefining the shared ScrollTrigger definition in having it placed in a common parent timeline. As it is not a good practice, is there a good one to avoid code duplication ?
Thank's a lot for your patience
PS: I don't know if it could be relevant but I'm using Vue.js -
In having a master timeline, we could easily keep track of it and for example kill it to recompute it on window resizing or on navigating through different pages. How to do such a thing if multiple ScrollTriggers are defined at multiple places in the code ?
-
let master_timeline = gsap.timeline(); create_animation(); function create_animation(){ master_timeline.add("start") .add(create_scrolltriggered_animation(), "start") .add(create_other_subpart_animation(), "start") .add(...); } function create_scrolltriggered_animation() { let res = gsap.timeline({scrollTrigger: {scrub: true, ...}}); res.add("start") .add(create_scrolltriggered_animation_part_one(), "start") .add(create_scrolltriggered_animation_part_two(), "start"); return res } function create_scrolltriggered_animation_part_one() { let res = gsap.timeline(); res.add("start") .to(target, {...}, "start") .fromTo(other_target, {...}, {...} , "start"); return res } function create_scrolltriggered_animation_part_two() { // Very similar to part_one but for other targets } function create_other_subpart_animation() { // Very similar to "create_scrolltriggered_animation" but with no scrollTrigger }
Hello, I'm trying to figure what is the best practice to combine timelines and scrollTrigger in a modular and clean way but I don't find any answer.
The following code extract corresponds to the standard way I'm trying to create Timelines, which works great with no scrolltrigger. But, in this code, ..._part_one and ..._part_two are played immediately and not controlled by the scrolltrigger defined in the function "create_scrolltriggered_animation".
So what is the best way to adapt this and make ..._part_one and ..._part_two be controlled by the scrolltrigger in the parent timeline ? -
8 minutes ago, Cassie said:
Glad to hear you're enjoying the tools and getting good support in here!
We're entirely funded from the support of our Club GreenSock members - so if you're ever in a situation where joining is a possibility, it's the best way to say thanks! (Plus you get tons of fun bonus tools to play with) 💚
Good to know, I would be glad to join it when it financially will be more a possibility for me 🙃
- 2
-
Wow ! Wow ! Wow ! I'm so amazed by so many things 😮👏🏻
I mean:- The quality of your answer @akapowl and the fact it's so detailed, relevant, well explained, and even points out and links to the very elements I was missing. I have so much more to learn.
- The power of GSAP in general, it's so well thought, engineered, developped and documented.
- The help this forum gives and the possibility to always have a useful answer for every problem.
I will never be thankful enough for all of this
- 3
-
Hello all,
I'm having difficulties on a ScrollTrigger animation in which I want to add a "delay" between different parts. The problem is that during that delay between tweens, elements are not pinned and are scrolling which is not the effect I'm searching. I don't know what is the best way to keep pinning these elements during this delay.
I made a CodePen with my animation to better understanding.
The animation I would like to obtain is while scrolling is the following:
1) the letter "A" appearing from the center of the screen at scale 0 to scale 1
2) the letter "A stay pinned at the center during a "delay 1" time (no tween here)
3) the letter "A" going from scale 1 to scale 10 while disappearing and being pinned at the center of the screen4) Nothing during a "delay 2" time
5) Then the same steps for the letter "B"
In the CodePen, "delay 1" = "delay 2" for simplicity.
I could be so grateful if someone could help me on this problem.
Thanks a lot -
On 4/29/2022 at 5:53 PM, Cassie said:
Hey there!
Background position is a property of background images - you can't apply that to images in image tags or videos.
It's best to animate transforms instead of background position though. Maybe this pen will give you what you need to get started.
Good luck!
It works, that's it. Thank you 🙂
-
Hello,
I'm trying to create a parallax effect. On the CodePen I set the background by two means : the first one in HTML withsrc
attr ofimg
doesn't work. But as soon as i remove thissrc attr
and set the image in JS usingbackgroundImage
, it works.
As in reality I'm trying to reproduce this effect with a background video (source
tag inside avideo
tag instead ofimg
tag), as far as I know I can't set the video url using JS and I'm obliged to use the src attr ofsource
tag so the effect doesn't work.I don't understand why it doesn't work using
src
. So is there a way to do this effect with a video ?Thank's in advance
-
Hello,
I have exactly the same problem but I'm wondering what is the solution. I'm trying to implement a horizontal scroll very similar toSee the Pen YzygYvM by GreenSock (@GreenSock) on CodePen
. It works fine when I put the markers but stop working when I remove it. If a CodePen seems useful I could try to provide it. In the demo there isheight: 100vh;
So where is the space necessary to scroll in there ?
Thanks to enlighten me. -
2 hours ago, OSUblake said:
You really can't use fit like that by passing in a scrollTrigger. However, you can still use fit to get the values you need.
It works PER-FECT-LY ! 👌
I'm SO grateful to both of you. I'm amazed by how powerful GSAP is and how helpful this forum is.
It has made my week 😍- 3
-
2 hours ago, akapowl said:
Hello @Apnw2
You might just need the offsetLeft / offsetTop instead - like in this very similar thread:
Thank's a lot @akapowl. As @OSUblake pointed out, offsetLeft/ offsetTop was much more difficult because of parents positioning. I discovered the Flip plugin in the thread you joined, and especially its fit() function. I was so amazed because it's doing exactly what I want but in a simplier way.
But now it creates me another problem 😅. I tried aFlip.fit()
which is working and doing exactly the move that I want when I give it aduration
. But as soon as I try to give it ascrollTrigger
withscrub: true
instead of the duration parameter, it stops functioning. I found a topic (here) where Flip and ScrollTrigger work together but I think the difference is because it usesFlip.to()
instead ofFlip.fit()
in my case. Moreover, in this other post (here), I'm not sure to understand well but it seems that in any case the animation would be broken on window resizing as in my first problem.I create a new
See the Pen QWaPNJv by MaxOlliv (@MaxOlliv) on CodePen
to illustrate the problem, in this, if we comment the second Flip.fit(), the blue rectangle is at its initial position (center of the screen), but if we uncomment it, it jumps instantly to the end position (top left) without any ScrollTrigger scrub.
Thank's for your patience. -
Hello @OSUblake, thank's for your answer.
I was really enthusiast when I read it since it looked like the answer, but unfortunately so disappointed when I saw it doesn't work on field. I think that's becausegetBoundingClientRect
gives me the value with transform at each time. So maybe because the use ofinvalidateOnRefresh
is not the one we wait.
An other hypothesis could be that my start and end objects are in fact SVG paths so maybe it messes up -
Hello,
I'm trying to move an object (whith position and size function of the window size) to a certain point and size using ScrollTrigger scrub. The problem is that when I resize the window during the scroll, all the timeline is not valid any more because the new move is computed with the current position of the object instead of its initial position. I don't know how to get the position independtely of the properties modified by GSAP.
I tried to make a codepen to illustrate my problem, but I'm not sure it works well, the goal here is to move the green rectangle on the middle of the screen to the position and size of the one on the top left.Thank's a lot for your help
See the Pen xxpBNLa?editors=1111 by MaxOlliv (@MaxOlliv) on CodePen
-
Thanks for your answer,
In fact, I was thinking to make a calculation similar as the one in your second codepen example, but the problem I'm coming with in this topic is that the animation in my codepen is not smooth and jumps pixel by pixel. -
Hello,
I'm trying to fill a circle from the outside to the inside and scale it. We can see on the codepen that it works approximately, but the filling thanks to the border-width attribute is not smooth and kind of jumps, whereas the scale works perfectly smooth. The end goal would be to cover entirely the screen in blue, so if another method is more appropriate I'm open.Thanks in advance,
Max -
Oh yes, that's exactly it !
Thank's a lot for such a fast answer and sorry for this stupid question, I thought the answer would be a lot more difficult. -
Hello,
I'm quite new to GSAP world and trying to learn it. All the examples of the docs and this forum are an incredibly helpful thing !
I'm currently trying a little ScrollTrigger animation but can't manage to make it work on my own.On the attached Codepen, my goal is to make the blue square grow progressively from scale 1 to scale 4 when scrolling down the 100px between the start and the end of the animation, and reverting from scale 4 to scale 1 progressively when scrolling up the 100px from the end to the start of the animation.
On the Codepen, as you see, the blue square will grow all at once when the animation starts and won't revert when scrolling up to the beginning of the animation.
Thank's for your help and sorry if the solution is evident. -
Hello,
I'm struggling to morphing an absolute svg to a fixed one.
In my Codepen example I would like the letter "o" in the center of the screen becoming progressively the blue circle in the header but it doesn't work.
Some help will be super helpful.
Thank's a lot.
Timelines modularity and ScrollTrigger best practices
in GSAP
Posted
Can't wait to see it 😉