Jump to content
Search Community

Growing circle and text through it on scroll

Edward test
Moderator Tag

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

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

@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

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.
×
×
  • Create New...