Jump to content
GreenSock

Edward

Growing circle and text through it on scroll

Go to solution Solved by OSUblake,

Recommended Posts

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

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

You should have the dot and your text inside the same container, and then pin that container.

Link to comment
Share on other sites

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

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

 

  • Like 2
Link to comment
Share on other sites

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

  • Solution

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

 

  • Like 3
Link to comment
Share on other sites

@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.

 

 

  • Like 5
Link to comment
Share on other sites

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.

 

 

  • Like 4
Link to comment
Share on other sites

Thank you so much both of you, it works now :)

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×