Jump to content
Search Community

Items 'falling off' of perspective timeline/track

AnnaMarie test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi I'm fairly new to greensock, and I'm loving it.

I'm making a 3D timeline(or track) that I'm moving eggs forward and backward when scrolling. I've used perspective to get the '3D' effect. But, I've run into problems, getting the egg to 'fall off'/disappear when it reaches the end. I want to make the whole egg disappear/re-appear when it reaches the end, not portions of it as it moves out of the view-box. Is there some cool way greensock can help me do this?

 

Here's the link to the codepen

 

Any comments would be appreciated. 

 

See the Pen ReqxOQ by anna-marie-vos (@anna-marie-vos) on CodePen

Link to comment
Share on other sites

Hi @AnnaMarie :)

 

Welcome to the forum.

 

GSAP is an animation engine that tweens numeric values so there's really no 'out-of-the-box' cool solution that you can just click and add to your project. It's gonna come down to how you structure your elements.

 

I'm not sure I follow what you'd like to happen with the eggs. Do you want to actually see the egg in the back fall? Or should it just disappear and we assume it fell? How does the new egg appear at the front of the line. Does it just pop on or does it scale up from 0? In any case you'll probably want to animate the actual eggs rather than the wrapper around the eggs. You could animate each egg to the next position and when egg 4 falls, you pop on (or scale up) a new egg at the front position.

 

Does that make sense?

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

16 hours ago, AnnaMarie said:

I've used perspective to get the '3D' effect. But, I've run into problems, getting the egg to 'fall off'/disappear when it reaches the end.

 

What end? Your eggs aren't moving. You're just changing the viewing angle, which is creating parallax motion. You can resize your screen and get a similar effect without any animation.

 

If your eggs were actually moving, you could get them to loop using the ModifiersPlugin.

 

See the Pen rLJmOv by GreenSock (@GreenSock) on CodePen

 

 

See the Pen QEdpLe by GreenSock (@GreenSock) on CodePen

 

 

  • Like 5
Link to comment
Share on other sites

Hey @PointC thanks for your reply. The eggs should just disappear, (and we assume it fell off). They should re-appear when you scroll in the opposite direction.

At the moment when I scroll the get is 'cut' when it's moving out of the view box. I want it to disappear completely so that i don't get the below effect.   

 

Hey @OSUblake, thanks for your reply. When a user mouse-scrolls over the eggs they move up or down in perspective. I want them to disappear when they reach the end of the view box. I don't want them to be cut by the view box as they move out of view. :)  

image.png

Link to comment
Share on other sites

1 hour ago, AnnaMarie said:

When a user mouse-scrolls over the eggs they move up or down in perspective. I want them to disappear when they reach the end of the view box. I don't want them to be cut by the view box as they move out of view. 

 

 

Sorry, but there is no easy way to do that using HTML/SVG. If you want to do 3d stuff, my suggestion would be to use an actual 3D library like three.js. It has perspective cameras with viewing fustrums, so it can detect intersections like that.

 

https://threejs.org/examples/

 

 

 

  • Like 2
Link to comment
Share on other sites

You can fake the effect.

 

1. Create paused tween for each element and then set tween's progress to how you like to scatter elements.

2. On scroll increase the progress of each tween based on wheel movement.

3. Once progress of a tween reaches to 1, set the progress to 0 so element will disappear and reappear at top, keep repeating

4. Also you are using mousewheel event that doesn't work in firefox use wheel event instead.

  • Like 1
Link to comment
Share on other sites

Allow me to chime in a bit as well.

 

Firstly, AnnaMarie, I would caution you that what you are trying to achieve is not trivial, not if I understand what you are after. It involves calculating boundaries and working out where each egg is relative to the parent element.

 

Also, I think Blake was being a little bit too literal when responding to your question. He's great but operates on a much higher mental RPM so, he tends to leave us mortals behind...

 

Having said all that, the crutial point I think we should get to is what is exactly the intended behaviour that you are after? Do you want the eggs to disappear because they are touching the top of the container or would you want your animation to be contained within the container?

 

Mikel has given you an example that works but I feel it might be a bit too much right now. It also uses scaling rather than perspective so, it doesn't quite look right.

 

I had a look at how you constructed your example and assumed you intend to use the CSS perspective. I also assumed you wanted the eggs to stay within the container. Even if you wanted the eggs to fall at the end of the tween, it's just a matter of creating a more detailed timeline. Have a look bellow, it's the simplest example I could come up with that I think fits your criteria. And, is responsive to boot. :)

 

See the Pen 3f4a9496f0122bf60fbf25f79b238ed7 by dipscom (@dipscom) on CodePen

 

ps: Note that I have also removed some redundant code you had added a few more eggs.

Link to comment
Share on other sites

Hey everyone. ?

Thanks so much for all your help. I am a little overwhelmed (to be honest).

@mikel, @Sahil and @Dipscom, I'm still working through your posts and suggestions. 

@OSUblake I'm also going to checkout three.js (but it looks a bit intimidating at first glance).

 

Thanks so much for all your help. I am extremely grateful for all your help and support. ?

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