Jump to content
Search Community

moving elements behind another

kylerumble test
Moderator Tag

Recommended Posts

Hello,

 

I'm trying to move all the outer circles behind the center circle on scroll. But I can't figure out how to find the center XY coordinates. 

 

I thought what i was doing was correct, but it's not working. 

 

Also, is there a way to trigger them sequentially?  I feel like I saw a video tutorial a while back on V3 and the ability to move an element to a relative position to another, but I can't seem to find it. 

 

Thanks,

 

Kyle

See the Pen mdPvvoP by kylerumble (@kylerumble) on CodePen

Link to comment
Share on other sites

Hello Kyle, welcome to the forum.

im sure that you will enjoy it and find people very helpful.

 

i recently  did some circle animations and opted to use svg with some circles moving on a path.

that way the circles centres can all be defined with the same cx And cy plus a radius And you can use various options to get direction (from, to, reversed, and Even path direction).
 

i think that you can even do it with HTML by defining all the circles With elements at the same absolute position.

 

one of the attractive points about the svg method is that The parameters can be defined as integers especially if you don’t mind doing a rotation to set the starting Position circles.

 

 

  • Like 1
Link to comment
Share on other sites

So I'm almost there, but yet still far away! :(

 

So here is my updated Codepen:

 

See the Pen ExKzyxR by kylerumble (@kylerumble) on CodePen

 

what I'm trying to achieve is at the end have the circle grow out, and then show the #arc svg at the bottom. So that it ends like this https://www.dropbox.com/s/gmdfpk84l83dwaj/screen-4.jpg?dl=0

 

But it's looking horrible.

 

Issues I'm having:

 

- I'd like the hero section to shrink in height. I'm having height issues with the pinning etc. This part confuses me

- make the circle growing and the arc look like they are joined.

 

I've seen something that would look awesome here: 

See the Pen QWyLVLO by osublake (@osublake) on CodePen

 

But I am not sure how to pull that off. I'm sure this would look so much better as a mask. 

 

I'm hoping someone can help. I'm buying beers, or I'd even give you money. :) I'm stuck, and I've spend days trying to figure this out. 

 

I'm excited to pay it forward and help others when I can finally figure this stuff out. 

 

Link to comment
Share on other sites

Hey @kylerumble. Did your post in the jobs and freelance section not get you the help you needed? What specific question do you have?

 

If you'd like our help debugging please make a demo that's focused on the one issue that you're asking about with all the irrelevant parts stripped out. It's much harder for us to help when you have a lot of things going on. 

Link to comment
Share on other sites

@ZachSaucier

 

I've removed the unnecessary animations. 

See the Pen abNrymb by kylerumble (@kylerumble) on CodePen

 

What I'm looking to do is similar to this: 

See the Pen QWyLVLO by osublake (@osublake) on CodePen

 it's the closest demo I could find. 

 

- I have an expanding red circle (part of the SVG, but really doesn't need to be), which then covers the entire container (not the page).

- From there I want the container to shrink vertically, and center the text (which is not part of the SVG for this reason) 

- and have the white svg arc scale up

- and then the background is unveiled. 

- finishing up looking like this https://www.dropbox.com/s/gmdfpk84l83dwaj/screen-4.jpg?dl=0

 

I want this to all be fluid. 

 

 Issues I'm having which are probably obvious.:

 

- figuring out how to piece all 4 parts together

 

 

Please let me know if Greensock has a beer fund to donate to. :)

 

Kyle

Link to comment
Share on other sites

12 hours ago, kylerumble said:

Issues I'm having which are probably obvious.:

- figuring out how to piece all 4 parts together

So forget about 3 of them. Just get each piece working in a standalone fashion and then put them together :) 

 

Sorry, but you're still asking too much for us to help out with for free in these forums. We don't have the capacity to build out people's projects for them like what you're asking for. Again, if you have a specific question we'll do our best to help. But as is your request is still too broad.

 

12 hours ago, kylerumble said:

Please let me know if Greensock has a beer fund to donate to. :)

You can support GreenSock by joining Club GreenSock! Plus then you'll get access to GSAP's premium plugins which can save you tons of time and open up a lots of new possibilities for your animations.

  • Like 1
Link to comment
Share on other sites

@ZachSaucier

 

Totally understand. I do appreciate your time. And I purchased the ShockinglyGreen. 

 

Ok, so I have a working part of what i need. I used an existing demo modified it  and added what i needed. 

 

See the Pen Rwazrxp by kylerumble (@kylerumble) on CodePen

 

I'm just having issues with pinning. The codepen stops working if I add pinning to the scroll trigger. you can see how I've commented it out. 

 

I'd really appreciate it if you could help with that. I have spent a few hours trying to figure it out.

 

 

Thanks so much.

 

Kyle

 

 

Link to comment
Share on other sites

@mikel

 

Pretty much exactly what I need to get me where i want to go! Thanks so much.

 

My only question would be how can i shrink the height of the hero somewhere within the timeline near the end so that the hero section is say "500px" high. Just an example, as i'll set it dynamically on screen size. I'm just trying to solve the mobile screen issue, where this entire section is full height. 

 

What i tried as an example, was to just set the height of the hero to 50vh, but that just cuts off the svg.

 

The goal is to arrive at the end with a hero section that would be consistent in height across the site. 

 

By the way, it's incredible what you can do! in hours or minutes compared to days for me! I'm really excited to get better at this, and really appreciate the help.

 

Thanks again,

 

Kyle 

 

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