rremus Posted May 19, 2020 Share Posted May 19, 2020 Hey guys ! I'm new to this awesome tool called GSAP and I have to achieve this animation: https://drive.google.com/file/d/1LgezPQLudZNBGkq1LfG8KjLiEC_TCl8x/view I've already made a part of it , but i'm interested if i could make the images behave like in the video? Some tips would be great :) Have a nice day ! Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 19, 2020 Share Posted May 19, 2020 Hey rremus and welcome to the GreenSock forums! 2 hours ago, rremus said: i'm interested if i could make the images behave like in the video? Definitely! Upon first viewing the video, I'd be inclined to setup the image, title, and materials for each section in their own container. Then when the arrows are clicked translate and fade in the container, optionally with an additional delayed translate and fade of the image. Then do the line animation. We're happy to help with specific questions if you get stuck Link to comment Share on other sites More sharing options...
rremus Posted May 19, 2020 Author Share Posted May 19, 2020 Thank you for your answer @ZachSaucier, I think i'm getting closer to the desired result. For now I have this code over here but i cannot achieve the overlapping element that is coming after the first one with a fading effect (as in the video above). Some thoughts on this ? gsapAnimate(direction) { const tl = gsap.timeline(); tl.set('.carouselImg', {opacity:1, x:0}) tl.set('.customLineBlue', {opacity:0, x:0}) if (direction === 'left') { tl.from('.carouselImg', {opacity: 0,x:-40, ease: "circ", duration :.3}) tl.to('.carouselImg', {opacity: 1,x:0, ease: "circ", duration :.3}) tl.from('.customLineBlue', {opacity: 0,x:-40, ease: "circ", duration :.2}, "-=0.3") tl.from('.carouselInfo', {opacity: 0,x:-40, ease: "circ", duration :.2}, "-=0.3") tl.from('.loadingLine', {keyframes: [ {duration: 0.2, scaleY: 0, y: -20, ease: "circ"}, {duration: 0.5, scaleY: 1, y: 0, ease: "circ", delay: 0.2}, ]}, -0.1) tl.from('.loadingLineHorizontal', {keyframes: [ {duration: 0.2, scaleX: 0, x: -80, ease: "circ"}, {duration: 0.5, scaleX: 1, x: 0, ease: "circ", delay: 0.2}, ]}, -0.1) tl.from('.brukt', {opacity: 0.6, ease: "circ", duration: 0.3}) } else { tl.from('.carouselImg', {opacity: 0,x:40, ease: "circ", duration :.3}) tl.to('.carouselImg', {opacity: 1,x:0, ease: "circ", duration :.3}) tl.from('.customLineBlue', {opacity: 0,x:40, ease: "circ", duration :.2}, "-=0.3") tl.from('.carouselInfo', {opacity: 0,x:40, ease: "circ", duration :.2}, "-=0.3") tl.from('.loadingLine', {keyframes: [ {duration: 0.2, scaleY: 0, y: -20, ease: "circ"}, {duration: 0.5, scaleY: 1, y: 0, ease: "circ", delay: 0.2}, ]}, -0.1) tl.from('.loadingLineHorizontal', {keyframes: [ {duration: 0.2, scaleX: 0, x: -80, ease: "circ"}, {duration: 0.5, scaleX: 1, x: 0, ease: "circ", delay: 0.2}, ]}, -0.1) tl.from('.brukt', {opacity: 0.6, ease: "circ", duration: 0.3}) } }, Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 19, 2020 Share Posted May 19, 2020 You've got a lot of tweens there I'm surprised you need so many. You might find GSAP's defaults useful to save you time typing and updating things. In this case I think ease: "circ" would be a smart default for the timeline. It's pretty hard to help by just looking at code. How about you try to create a minimal version of the same sort of setup and then include that along with a description of what's going wrong? This thread talks more about how to do so: 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