Jump to content
Search Community

Section slides

senna test
Moderator Tag

Go to solution Solved by PointC,

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

Hello, 

I'm working on a schoolproject and I would like to use something like this: http://scrollmagic.io/examples/advanced/section_slides_manual.html

 

I made this code, but it's acting weird. http://codepen.io/codesen/pen/bwogPj 

 

Want I want: when you scroll, one page moves to te left and the next page comes in to the screen with a little scaling. I used a timeline for this. 

What is happing: when you scroll all page are thrown on top of each other, the backgroundcolors disappear and everything moves to the left. Not really what I was expecting. 

 

I hope you can tell me why this is happening! 

See the Pen bwogPj by codesen (@codesen) on CodePen

Link to comment
Share on other sites

Hi,

 

 

Thanks for the demo. Sorry to hear you are having trouble.

It appears to me that your animation works properly without ScrollMagic: http://codepen.io/GreenSock/pen/PGOVOv?editors=0010

 

I'm really not very familiar with ScrollMagic. Its possible there is a mistake in there that someone else will recognize but you may want to try posting your issue here: https://github.com/janpaepke/ScrollMagic/issues for the ScrollMagic authors to analyze.

  • Like 2
Link to comment
Share on other sites

  • Solution

Hi senna :)

 

The problems you're experiencing mainly come from the CSS. I set your parent container to a height of 100vh so the other divs know what 100% height means. The slides should use absolute positioning rather than a float. Then position them at left: 0,25%, 50%, and 75% of their parent container so they're ready to scroll into view. 

 

Here's a fork of your pen that looks like it's working properly to me:

 

See the Pen JROqEA by PointC (@PointC) on CodePen

 

Just my 2 cents worth here, but I'm not sure ScrollMagic is the best choice for this animation. It can certainly work, but you should take a look at a couple of Diaco's demos to see other approaches that offer more flexibility:

 

See the Pen XmozON by MAW (@MAW) on CodePen

 

See the Pen yYradO by MAW (@MAW) on CodePen

 

Hopefully that helps a bit.

 

Happy tweening.

:)

  • Like 5
Link to comment
Share on other sites

  • 2 months later...

Hey,

 

i don not really know if I need to create a new topic for that, cause it is similar to that one here.
I have ask something on stackoverflow:

 

I wann create sections that has scroll animations inside with scrollmagic.

 

1. each section has a story like on scroll there are elements that coming in part a part.

2. if a section has ended the story it should scroll to the next section without effects, like a normal onpager

3. it should be navigatable via next/prev buttons and dots for each section

4. all sections sould be responsive, so I can create querys for tablet/desktop/XL-desktop screens

 

Here the stack: Stackoverflow

Here a codepen:

See the Pen PbXXXr by muuvmuuv (@muuvmuuv) on CodePen



Is that possible? and how can I archive that?

Link to comment
Share on other sites

HI muuvmuuv  :)

 

Welcome to the GreenSock forums.

 

I'm not sure what your current skill level may be, but all of what you're describing should be achievable. We do try to keep the focus of the forum on GSAP related questions and problems though. Since your project seems mostly related to ScrollMagic, I'd highly recommend Petr Tichy's tutorials. He's a forum moderator here, but an expert in ScrollMagic. He's got some free tutorials and some paid training as well. I personally took his ScrollMagic Workshop class and it was well worth it.

 

Here are some links to his site and tutorials.

 

https://ihatetomatoes.net/blog/

https://ihatetomatoes.net/5-days-with-scrollmagic/

https://ihatetomatoes.net/get-scrollmagic-workshop/ 

 

Also be sure to look at Diaco's examples that I listed in Post #3 above. You can learn a lot by forking those examples.

 

In answer to your question about starting a new topic - yes - you usually should start a new topic for any GSAP questions you may have. This topic was already marked answered and adding additional questions to it could easily get overlooked. We want to get you the best answers possible so we don't want to miss any of your questions.

 

Hopefully that gets you started in the right direction. We'll be happy to help with any GSAP troubles you may encounter.

 

Happy tweening and welcome aboard.

:)

  • Like 2
Link to comment
Share on other sites

Hey @PointC.

 

Thanks for the quick respond. I'll take a look at this tuts.

Should I create a new topic now or leave it as it is here?

 

I also used the examples above and it was a big step forward in my project. Hope I get that finished soon

with the tutorials ^^.

 

Thanks at all.

Link to comment
Share on other sites

  • 2 years later...

Hi PointC

While analizing your code of Full Screen Slider I was confused. With the version is gsap 2.1.2 it doesn't work correctly: if you scrolling to the the end and want back to the first slide, slider "slips" on the third and second slides. In the same time, with the version 1.18.0 - OK.  Can you explane changes that have been made in the library and how can i fix that. Thank you very much!

Link to comment
Share on other sites

@greg K to which demo are you referring? One of those from Diaco I posted above? If so, I'm not sure if they work or not with the latest GSAP. I've never tried them with other versions or looked to see what has changed. If you want to fork one of them and post it, we can take peek.

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