Jump to content
Search Community

Pin a section inside a pinned section

Jonas Calvo test
Moderator Tag

Recommended Posts

Hello,

 

I'm having problems to do the animation I want with Scrolltrigger and containerAnimation.


What I cannot achieve is pinning an element to activate horizontal scrolling, and then pin each element inside as the horizontal scroll is happening (the effect will be like elements going over each other).

 

I used the containerAnimation to trigger an animation inside a triggered animation but didn't worked as I planned.

Has anyone an idea how I can fix it?

Many thanks in advanced,

Jonas

See the Pen gOvEewB by jonascalvo (@jonascalvo) on CodePen

Link to comment
Share on other sites

I believe on the child scrollTrigger you can do "pinnedContainer: true" and that will solve the issue.

 

I'm not sure that would actually help. In fact in the docs it seems to suggest that pinning isn't available in a containerAnimation as you have it.

  • Like 1
Link to comment
Share on other sites

Ah, yeah you can't pin elements inside a 'horizontal scrolling' section. That's one of the limits of containerAnimation - sorry.

You could try to animate the element an equal distance in the opposite direction to emulate pinning?

  • Like 1
Link to comment
Share on other sites

Horizontal scrolling like this is just an animation that you're scrubbing through with scrollTrigger.

So what I'd actually suggest is to remove scrollTrigger for now. Then create a timeline that does what you want (I think you want to move the divs left one by one over the top of each other) and then once it's looking right - hook that timeline up to scroll.


 

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

Hi again,

 

I'm coming back with an issue I'm experimenting with this horizontal animation as soon as I'm implementing it on WordPress.


The url for the website is http://larafraire.com/wp/
 

The animation works fine when I'm on desktop, but as soon as I'm trying it on responsive stops working.

 

I also have it without WordPress implemented and is working perfectly (http://larafraire.jonascalvo.com/) so I guess is something related with the CMS.

Has anyone an idea how I can fix it?

Many thanks in advanced

Link to comment
Share on other sites

Hi there - sorry there's not really enough information here to help.

 

I guess a minimal demo is out of the question seeing as it's wordpress, but do you have any more context for us?

Is wordpress wrapping the content or adding styles of some sort?
How is it broken?
Are you sure the code is exactly the same?

Link to comment
Share on other sites

Hi Cassie,

 

We made our custom template and appart from some minimal style WordPress is adding the rest is basically the same as the one without WordPress.
The javascrip code is exactly the same from one page to the other.

 

The animation should start when the top of salmon section touches the top of the screen, and then the horizontal scroll is activated. In desktop this animation works perfectly, but on mobile the markers are not activating.

I realized that on mobile there's an horizontal scroll available (without doing any vertical scroll) and the markers are positioned at the very right of it.

 

Please find attached the code I used for this animation in case can add some more context to it.

 

let scrollTween = gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".galeria",
    pin: true,
    scrub: true,
    markers: true,
    //snap: directionalSnap(1 / (sections.length - 1)),
    end: `+=${container.offsetWidth}`,
    // toggleClass: {targets: '.menu', className: "dark_visible"}
  }
});

 

At the end the idea is having the same animation that is working on desktop applied to mobile.

 

Many thanks for your help and quick reply,

Jonas
 

Link to comment
Share on other sites

As the website without being implemented in WordPress is working, I guess must be something related to what we did on the implementation and not compatible with Chrome and Firefox.

This is the minimal demo with the code we're using on the animation.

See the Pen gOeLWOq by jonascalvo (@jonascalvo) on CodePen



Many thanks for your support on this topic, I understand that can be a lot of things not related to Gsap

Link to comment
Share on other sites

Hi Jack and Cassie,

First of all I wanted to say thanks for all your help and being interested.

I just found out what was causing the problem with my animation, when I coded the website before implementing on WordPress I defined my viewport like this: <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

 

And then on the implementation it changed to <meta name="viewport" content="width=device-width, initial-scale=1">

 

This difference was making my animation breaking in all browsers except Safari (desktop and mobile).
 

Hehehe, won't happen again :_)

thanks,

Jonas

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