Edward Posted January 4, 2022 Share Posted January 4, 2022 Hi, I don't know how to achieve something like in the link below. https://postimg.cc/t7stKdGx The circle will be invisible at first, then when we scroll the page, it should start growing and take the full screen and when we scroll more the text should come from right to left. I would really appreciate if someone helps me. Thanks, in advance See the Pen PoJerwK by edward99 (@edward99) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted January 4, 2022 Share Posted January 4, 2022 Just continue on with your timeline and move the text in. You can use the position parameter to time when it should start. Link to comment Share on other sites More sharing options...
Edward Posted January 5, 2022 Author Share Posted January 5, 2022 I tried, but when I scroll the text also going up, how can I fix it? See the Pen GRMGvrY by edward99 (@edward99) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted January 5, 2022 Share Posted January 5, 2022 You should have the dot and your text inside the same container, and then pin that container. Link to comment Share on other sites More sharing options...
Edward Posted January 5, 2022 Author Share Posted January 5, 2022 I'm sorry I didn't get, can you be more specific? or can you show me how to do it? I tried to put them in same container but don't know how to pin it See the Pen PoJaQqo by edward99 (@edward99) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted January 5, 2022 Share Posted January 5, 2022 The trigger is what gets pinned. You should never add a ScrollTrigger to tween nested inside to a timeline. Check out the ScrollTrigger most common mistakes. let tl = gsap.timeline({ scrollTrigger: { trigger: ".container", start: "top center", end: "+=100%", scrub: true, pin: true, markers: true }}); tl.to(".dot", { scale: "40", }).to( ".text-container", { x: -5900, }, "-=0.3" ); I would also suggest going through all the demos listed on the ScrollTrigger docs. https://greensock.com/docs/v3/Plugins/ScrollTrigger 2 Link to comment Share on other sites More sharing options...
Edward Posted January 5, 2022 Author Share Posted January 5, 2022 But still, it doesn't work.. I've been looking through all demos, but couldn't find the the issue I'm having here. I kinda tried to increase the "end" property to +=2000%. in that case dot is perfectly growing but the text sticks to the bottom and doesn't come up.. pls help me to fix it See the Pen rNGKJRQ by edward99 (@edward99) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted January 5, 2022 Solution Share Posted January 5, 2022 The text is going to stay there until the pinning has ended, which is determined by the end value you put here. end: "+=1200%", But of course it will stay at the bottom because you don't have any content underneath so the scrolling has ended. See the Pen KKXeoyb by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Carl Posted January 5, 2022 Share Posted January 5, 2022 @OSUblake the 142vmax for the dot width and height is very cool. clever trick! @Edward not exactly sure what the end result is going to be but I took a chisel to some of the css and changed the trigger to be the block. in one of your more recent demos the "start" marker was way above the "scroller-start" which meant your scrolltrigger animation was most of the way complete when the page first loaded before any scrolling occurred. Your GSAP code really wasn't bad. A big part of all of this is getting CSS to do what you want. This is what I came up with just trying to center the text over the circle. See the Pen RwLJMeL by snorkltv (@snorkltv) on CodePen This reminded me of one of my lessons in ScrollTrigger Express. See the Pen NWNrbay?editors=0010 by snorkltv (@snorkltv) on CodePen The focus of the lesson is on preventing the page from scrolling until the first part of the animation is done, but it uses a similar circle-fill trick that was inspired by another demo of Blake's. maybe something in the demo will be helpful. 80% of the hard part of ScrollTrigger animations is setting things up with CSS and HTML and getting the animation timeline right BEFORE you worry about ScrollTrigger. My beginner GSAP course is totally free (link in signature) if you are interested. Good luck with the project. 5 Link to comment Share on other sites More sharing options...
OSUblake Posted January 5, 2022 Share Posted January 5, 2022 5 minutes ago, Carl said: @OSUblake the 142vmax for the dot width and height is very cool. clever trick! Some of the math behind that. Technically it would be like 141.42 and some change. 283 would be able to cover it from any point inside of the container, but it's centered so not necessary. 4 Link to comment Share on other sites More sharing options...
Edward Posted January 5, 2022 Author Share Posted January 5, 2022 Thank you so much both of you, it works now 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now