Jump to content
Search Community

Creating a 3d scrolling selection box

EJ29 test
Moderator Tag

Go to solution Solved by Jonathan,

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 not sure where to start with this, being new to GreenSock. 

 

I'm a member of Club GreenSock "Business Green" level, so have access to everything that entitles me to.

 

What I'm trying to create is this, for a touch device.

 

post-47292-0-25137200-1476286321_thumb.png

 

There will be ten or so options, and I want the user to be able to flick through them, then click on the option of choice. 

 

Could you point me in the right direction of making a start on this?

 

Thanks.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

What you are trying to do is quite complex and it would take quite a bit of time just to explain some of the core mechanics and techniques. 

 

Fortunately, Blake has already created a demo that covers about 80% of what you need.

 

Please see this looping, draggable carousel: http://codepen.io/osublake/pen/c8723bcdba9df92bc11fcfe062e01de8?editors=0010

 

You can read more about the challenges and solutions in this thread: http://greensock.com/forums/topic/14916-loop-draggable-carousel/?hl=carousel

  • Like 2
Link to comment
Share on other sites

  • Solution

Hello Bambooing,

 

You can add this to the end of your code

// trigger on load
animation.progress(1).progress(0);

The above will allow GSAP to record your initial and ending values to achieve what you want.

 

Working example:

 

See the Pen BLVbox by jonathan (@jonathan) on CodePen

 

Does that help?

 

Resources:

progress(): http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/progress/

 

:)

  • Like 3
Link to comment
Share on other sites

Thank you! I'm afraid the code probably isn't optimised, but I'm not au fait with the controls yet. 

 

I did have an issue running it locally, strangely. When pointing to my local ModifiersPlugin, it doesn't work. It's the same version as the online one, but for some reason, it doesn't want to play - it doesn't loop the boxes properly back to the beginning. It's not a problem, because I can reference the CDN one, but interesting nonetheless. I've not delved into it to work out what's going on, except I get a "invalid modifiers tween value: [object Object]" in the console. I'll have a look when I get a few minutes and see if I can work out what's going on.

 

Could you explain to me why it's necessary to progress to the end and then back to the beginning in order for it to load properly? Is this something I need to look out for in future?

 

Thanks once again,

 

Fiona

Link to comment
Share on other sites

You would have to use the CDN version, the one in codepen is a codepen only version so users can test it on codepen.

The reason you need to jump to the end is because you are only applying the CSS changes when the element draggable is initialized. If you didn't want to do that you would have to set the initial CSS on each of those elements before or after page load.

 

But if you don't want to do that, then using progress(1).progress(1) is perfectly fine.

 

:)

Link to comment
Share on other sites

Make sure your loading all the same scripts that are in your codepen and see if you still have issues. And make sure that your markup and CSS (SCSS) like in your example. You could also try and console out inside the ModifiersPlugin function to output the values being cycled through.

Link to comment
Share on other sites

hmm, I'm not sure why ModifiersPlugin would give you any trouble.

 

I downloaded your CodePen demo using export > zip

 

When I tried to run it locally it did not work because the demo tries to load the protected "codepen only" version of ThrowPropsPlugin.

 

I then downloaded a fresh version of 1.19.0 from our site an added it to the demo like:

 

<script src='js/plugins/ThrowPropsPlugin.js'></script>
<script src='js/plugins/ModifiersPlugin.js?v=1'></script>
<script src='js/TweenMax.js'></script>
<script src='js/utils/Draggable.js'></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src="js/index.js"></script>

It worked fine.

 

Please verify you are loading all 4 GSAP scripts

  • Like 1
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...