Jump to content
Search Community

Pin on the bottom of the screen

yulia test
Moderator Tag

Recommended Posts

Hello! I'm trying to pin an element at the bottom of the screen until its parent element scrolls to the end.

It should work something like this: 

giphy.gif

This only works if initially the block with the text is at the top of the block with the picture. But then the block with the text sticks at the top of the screen. 

I need the opposite - the block with the text should be below the block with the picture. When the picture appears, the text should be pinned at the bottom of the screen and unpinned when the picture is completely scrolled.

Please, help. ScrollMagic support doesn't seem to work

 

Example of my code:

initScene: function(trigger, animate, duration, hook) {
  // Declare Scene
  const scene = this.$scrollmagic.scene({
    // ID of element where animation starts
    triggerElement: trigger,

    // {0,0.5,1} - animations starts from {top,center,end} of window
    triggerHook: hook,

    // Duration of animation
    duration: duration,
    reverse: true
  })
    // Declaration of animation and attaching to element
    .setPin(animate, {
      pushFollowers: false
    })

  // Add Scene to controller
  this.$scrollmagic.addScene(scene)
}
this.initScene('#trigger1', '#animate1', 300, 0)
Link to comment
Share on other sites

Sorry, but I don’t understand how to set the top of the green container as a trigger?  I only see the possibility of making the bottom of the green container as a trigger.

I need .sticky pinned bottom when the .green container touches the top of the screen. And .sticky should unpin when the bottom of the .green container touches the top of the screen

See the Pen pogWYOG by yuliarushay (@yuliarushay) on CodePen

Link to comment
Share on other sites

@mikel This is almost what I want! Thank you) I only need that after the animation, the #sticky container becomes position: relative and remains under the #green container when I scroll down the page further. Then, when scrolling to the top of the page, everything should be repeated in the opposite direction (like on gif)

Link to comment
Share on other sites

Hello again! I'm currently trying to achieve a result without absolute or fixed positioning. The problem is that the block with the text leaves the field of view. When I scroll the page up, this block appears back only at the top. Is there any way to fix this? Thank

See the Pen NWxymGa by yuliarushay (@yuliarushay) on CodePen

Link to comment
Share on other sites

The main problem is that the default ease is "power1.out" but your effect would require a linear ease. Just set ease: "none" and that should resolve it. 

 

Also, you can simplify this:

// OLD
transform: 'translateY(' + triggerHeight.offsetHeight + 'px' + ')',
  
// NEW
y: triggerHeight.offsetHeight,

Is this what you want?

See the Pen 4921a7e4e9fbe42353a2d47064275128?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Just beware that the reason ScrollTrigger does pinning with position: fixed is because most browsers handle the scrolling of the main page on a different thread, so if you try to accomplish it the way you're doing it (with just transforms), you can experience some "jitter" because the updates aren't synchronized. Might not be noticeable in every situation, though. I just figured I'd mention it. I didn't notice any jitter in your demo (at least in Chrome on my Mac).

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

@GreenSock This is exactly what I needed! Thank you:)

In the comments above, there was a great solution by @mikel with a fixed position, but on some tablets, switching between absolute positioning and fixed positioned for some reason does not work. I hope this solution will be displayed correctly everywhere 🤞

Link to comment
Share on other sites

Hope this is the last question. I have a problem with the position of the elements after changing the screen orientation. If you change the screen orientation before the animation is completed, glitches begin. Elements move to other positions, jump and move to their places only when I scroll up / down the page.

Normal view (left)  \ Glitch view (right)

Screenshot

It doesn’t help:  window.onresize = ScrollTrigger.refresh(); / window.onresize = ScrollTrigger.update();

 

Link to comment
Share on other sites

Are you sure actually called ScrollTrigger.refresh()? The code you posted would NOT accomplish that. 

// BAD
window.onresize = ScrollTrigger.refresh(); // this calls refresh and sets onresize to the RESULT (returned value)

// GOOD 
window.onresize = ScrollTrigger.refresh; // sets it to the actual function itself

But ScrollTrigger automatically calls refresh() on resize anyway, so you shouldn't really need to make that call. 

 

I'm not sure what to tell you, though, because you didn't provide a reduced test case. I'm not sure what's happening. I wish I could help more. 

Link to comment
Share on other sites

In general it's best to avoid directly using callbacks like .onresize because they might get overwritten by other scripts. You should try to stick to .addEventListener() instead whenever possible.

 

8 hours ago, yulia said:

https://klianto-site-stg.smartex-it.com If you look at the page on the iPad Pro (or simulate) and change the screen orientation in the middle of the scroll animation of text blocks, you will see a problem I think

It's really hard for us to debug on a live site. It'd be really handy if you recreated the issue using the minimal amount of code necessary using CodePen. I don't even know what section of the site you're talking about.

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

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