HiLuLiT Posted November 10, 2020 Share Posted November 10, 2020 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 comment Share on other sites More sharing options...
HiLuLiT Posted November 10, 2020 Author Share Posted November 10, 2020 the example from above: See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted November 10, 2020 Share Posted November 10, 2020 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 4 Link to comment Share on other sites More sharing options...
mikel Posted November 10, 2020 Share Posted November 10, 2020 Hey @HiLuLiT The nightingale effect regarding the image animation could be managed by clipPath. Here an example with ScrollTrigger See the Pen cf3df695077b033d9cab544546e2c3ca by mikeK (@mikeK) on CodePen Happy clipping ... Mikel 3 Link to comment Share on other sites More sharing options...
HiLuLiT Posted November 10, 2020 Author Share Posted November 10, 2020 @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 1 Link to comment Share on other sites More sharing options...
mikel Posted November 10, 2020 Share Posted November 10, 2020 Hey @HiLuLiT, Just a simple example See the Pen dyXQWaj?editors=1000 by mikeK (@mikeK) on CodePen Happy clipping ... Mikel 2 Link to comment Share on other sites More sharing options...
HiLuLiT Posted November 10, 2020 Author Share Posted November 10, 2020 @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 comment Share on other sites More sharing options...
HiLuLiT Posted November 10, 2020 Author Share Posted November 10, 2020 @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 comment Share on other sites More sharing options...
mikel Posted November 10, 2020 Share Posted November 10, 2020 Hey @HiLuLiT, You are using the same id for the images - not good. Try image{ height: 100%; } Happy learning ... Mikel 2 Link to comment Share on other sites More sharing options...
HiLuLiT Posted November 11, 2020 Author Share Posted November 11, 2020 @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 comment Share on other sites More sharing options...
mikel Posted November 11, 2020 Share Posted November 11, 2020 Hey @HiLuLiT, Your flex structure is too complicated for me. Here is the simple solution See the Pen jOrQvLK?editors=1100 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now