Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
HiLuLiT

ScrollTrigger layered pinning inside a pinned element

Recommended Posts

Hey all,

let's start from this demo that I have built - 


the effect i'm trying to achieve can be seen here:
https://www.nightingale.world/about/
(reference just the scroll effect on the image while scrolling )

 

and also in this example:
https://codepen.io/GreenSock/pen/KKpLdWW

As you can see in my demo, I have a pinned <div> ('.slide' class) and for each pinned slide i'm applying timeline animations.
i'm trying to add an animation on the images ('.img' class), but  unfortunately this doesn't seem to work, the images just stack on top of each other...

What am I doing wrong? I'm struggling...would love someone's help with this...
Thanks

See the Pen bGejGPQ by HiLuLiT (@HiLuLiT) on CodePen

Link to post
Share on other sites

Hey @HiLuLiT

 

I myself am a bit short on time right now, to take a look on your code, but the following threads actually contain demos with two different approaches to this. Maybe these examples can at least serve as inspiration meanwhile.

 

One of them (my own) is tweening on the height of the 'images' and the other one is translating the images on the y-axis.

 

 

 

 

Cheers,

Paul

 

 

  • Like 4
Link to post
Share on other sites



 @mikel - I'm still getting used to Gsap & ScrollTrigger and it feels like i'm not on this level yet lol... are you familiar with a vertical demo of this effect?

 @akapowl - the demos could work, i will try them out... and if you can have a look when you have some time i'd love that

Thank you both! I really appreciate it

  • Like 1
Link to post
Share on other sites

@mikel Thank you, I tried implementing this but i'm having a problem with scaling SVG inside a container... any suggestions? it just doesn't seem to fit my image size

Link to post
Share on other sites

@mikel - Sorry to bother you with this, as it turned out pretty nice, here's an updated demo -
only problem is now I can't find a way to scale the svg.... any suggestions?

See the Pen OJXajjx by HiLuLiT (@HiLuLiT) on CodePen

Link to post
Share on other sites

Hey @HiLuLiT,

 

You are using the same id for the images - not good.

 

Try

image{
  height: 100%;
}

 

Happy learning ...

Mikel

 

  • Like 2
Link to post
Share on other sites

@mikel we're almost there.... defently looks better, I update the demo:

See the Pen OJXajjx by HiLuLiT (@HiLuLiT) on CodePen



still problem remains - I want the SVG element to be 100% width of container (grid width) and 400px height... anything I try doesn't seem to work 

Link to post
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.

×