Jump to content
Jean-Tilapin

scrollmagic, scrollto, and flex width

Recommended Posts

Hello everyone,

 

What I'm trying to do is quite difficult to explain. The Codepen below should show you vaguely what I have in mind...

I'd like to improve that base with some awesome effects :

- a fullpage effect like in this topic (just start scrolling and it completes the animation thanks to scrollto plugin) 

But with one major difference : I'd like to trigger automatically 2 sections with a small delay, and both must be pinned together :

When the user starts scrolling from the landing screen, the red column should immediately go up (like in the other topic), but the pink one below should automatically follow with a small delay : both red and pink sections must stay pinned until the user starts scrolling again. Then the green column shows up, immediately followed by the light green content, etc. Do you see what I'm trying to achieve ?

 

Besides that, you can see an alignment problem with the pinned sections only the first time you scroll down. Once the sections have been pinned, the bug disappears. How can I fix that ? 

 

Thank you for your help !

 

nb : it is currently a test, I don't care about the DOM structure : if you see a better way to achieve what I want to do, you can of course suggest a different one.

See the Pen vwmOqd by Jean-Tilapin (@Jean-Tilapin) on CodePen

Share this post


Link to post
Share on other sites

For alignment issue try setting the width of .section,footer to 100% not 100vw.

 

Counter to all logic browsers include scroll bars in vw calculation, which really sucks.

 

Someone may choose to come in to help here but this really is mainly a scrollMagic issue so it may be best to take it to their forum. Our aim here is to focus on gsap issues.

  • Like 2

Share this post


Link to post
Share on other sites

Thanks for the fix, I didn't know about the scroll bar width ! i edited the codepen. I'll try tomorrow to ask on their forum (you mean on Github ?). Meanwhile if someone passing by can help...

Share this post


Link to post
Share on other sites

I may have an idea involving GSAP, but I'm not anymore on my work computer so I can't try tonight. :

If my DOM structure is more classical, such as 2 divs in 1 section, divided 1/3 - 2/3, and I use the brillant script of the other topic by Visual-Q

BUT I add a ".from" on y-axis for the large div, with the same time as the "up-scrollto" animation, wouldn't it work as I want ?

 

Share this post


Link to post
Share on other sites

I guess i'm a glutton for punishment and I couldn't help playing with this. I found that pins really threw a wrench in things as far as trying to setup triggers for panel scrolling so I separated that part into a separate wheel event. 

 

I'm sure there's a way to make it work all in scrollMagic but I"M NOT FIGURING IT OUT!😫

 

I did figure out what i thought was one kind of cool thing -  using a flag variable and onComplete to make the wheel event/Tween self throttling.

 

See the Pen eaWeLv by Visual-Q (@Visual-Q) on CodePen

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Thanks for your participation Visual-Q, but I'm not sure what the problem is ? Is it the "flickering, jumping jittering pinned elements bug" ? Can I help somehow ?

About your script, it's a "mouse controlled" exclusively (wheel event) ? Does it work on a phone ?

 

Edit : no, it doesn't work on a phone. I'll try to figure it out.

Edit 2 : does anyone know if a touchpad on a laptop trigger this "wheelevent" ?

Edit 3 : on my codepen above I've an error "Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object.". I'm not a Codepen Pro (far from it !). What did I forget ? Because the same script works fine on local and test server (beside that touch problem).

 

Edit 4 : I returned to the more classical version of your script, Visual-Q. Now fully "touch" compatible. But my Codepen still doesn't work, I don't know what I forgot.

Share this post


Link to post
Share on other sites

You need to add the gsap scrollTo plugin

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/ScrollToPlugin.min.js

 

and  while it's not necessary in this case as you're calling gsap in callback function you might want to add scrollMagic gsap plugin if you ever want use setTween anywhere

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.js

 

Seems to work now.

 

 

See the Pen YbQqvN by Visual-Q (@Visual-Q) on CodePen

  • Like 2

Share this post


Link to post
Share on other sites

Oh, I see, I chose the wrong one on my codepen. Sorry. Fixed it.

So, I achieved the scroll effect I wanted, but is it okay in a code-quality way ? Efficient and not too heavy for a site ?

 

Thank you all.

Share this post


Link to post
Share on other sites

It seems a reasonably efficient implementation for scrollMagic as long as you're using only full height panels. It really hinges on scrollMagic performing reliably across devices and browsers, that you'll have to test.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.