Jump to content
Search Community

Variable Height sliding in and out of elements.

ThomasDeer test
Moderator Tag

Go to solution Solved by ThomasDeer,

Recommended Posts

Thanks for the help with my earlier issue, Based on the similar code I have attempted to create a second slider within my site and have become unstuck again, Although similar to my previous slider, This one needs to have variable height as the element's are in a scss Clamp function to improve responsiveness as the images are purely for decoration.

Although due to this, I'm having a little issue trying to work out how to make the animation run smoothly. The codepen attached shows my issue. Hopefully, somebody could point me in the correct direction.

Also if someone would know how to make my PinQuotes() function a little more versatile, to allow for more quotes to be added or removed with nessercarily adjusting the JS each time, This would be amazing.

 

Thanks, Tom

See the Pen dyqgzpG by ItBeTommo (@ItBeTommo) on CodePen

Link to comment
Share on other sites

Hi @ThomasDeer I'm not completely sure what it is you want your animation to do, what I do recommend is to remove ScrollTrigger! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. If your animation is not doing what you expect, your ScrollTrigger will defenently not work. 

 

What I would do is first layout your elements with CSS, where you want them to start or end and then you'll only need a .to() or .from() animation. .fromTo() animations are great, but you'll rarely need them. So if you want the images to always move to the middle, I would then stack them all on top of each other with CSS and them move them .from() some position and when they need to move up .to() some position.

 

16 hours ago, ThomasDeer said:

how to make my PinQuotes() function a little more versatile

 

 

I sometimes also make the mistake of trying to optimise my code before having something working, it is hard to optimise code before it is doing what you want. I would personally first write it out and then you'll see pattens emerge which you could replace with a loop or a stagger. 

 

Please try your hand at my pen below without the ScrollTrigger and post that with an explanation of something like: "my image is not moving up when I expect it to at line 19"

 

See the Pen XWPxGwx?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 3
Link to comment
Share on other sites

  • Solution

Hi @mvaneijgen,

Thanks for your insight, The information you provided has managed to help me sort my issue.
 

    function pinQuotes() {
        let elementHeight = quoteHeight;
        
        quote_timeline.addLabel("One", 0);
        quote_timeline.to(".quote-article-1", { y: "-" + elementHeight }, "+=0.5");
        quote_timeline.addLabel("Two", "<");
        quote_timeline.to(".quote-article-2", { y: "-" + elementHeight }, "+=0.2");
        quote_timeline.to(".quote-article-2", { y: "-" + (elementHeight * 2) }, "+=0.2");
        quote_timeline.addLabel("Three", "<");
        quote_timeline.to(".quote-article-3", { y: "-" + (elementHeight * 2) }, "+=0.2");
        quote_timeline.to({}, { duration: '0.5' });
    }

For anyone interested, This is my Adjusted pinQuotes Function which was what I used to get this working as expected.

 

Thanks again for your assistance. I'm looking forward to using gsap in the future and learning more about this powerful library.

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