r3plica Posted June 22, 2022 Share Posted June 22, 2022 I have seen some of the topics here, so this should be relatively simple, but I am new and can't figure it out. I would like to create an animation of text like this: https://www.gotolstoy.com/ I have tried to create a component, the html looks like this: ``` <transition-group class="animation-container" name="staggered-fade" :css="false" appear v-bind="$attrs" @before-enter="beforeEnter" @enter="enter" > <h2 class="h1 mb-0" :class="heading.colour" v-for="(heading, i) in headings" :data-index="i" :key="i" > {{ heading.title }} </h2> </transition-group> ``` The code behind looks like this: ``` import { defineComponent, ref } from "@vue/composition-api"; import gsap from "gsap"; export default defineComponent({ name: "Business", setup() { const duration = ref(0.4); const headings = ref([ { title: "discover", colour: "text--pale-blue" }, { title: "experience", colour: "text--bright-blue" }, { title: "shop", colour: "text--blue" }, ]); const beforeEnter = (element) => { element.style.opacity = 0; element.style.transform = "translateY(50px)"; }; const enter = (element, done) => { console.log(element.dataset.index); console.log(element.dataset.skip ?? 0); console.log(duration.value); console.log( (element.dataset.index - (element.dataset.skip ?? 0)) * duration.value ); console.log("---------------------"); gsap.fromTo( element, { opacity: 0, y: 0, duration: duration.value, delay: (element.dataset.index - (element.dataset.skip ?? 0)) * duration.value, onComplete: done, }, { opacity: 1, y: 100, duration: duration.value * 2, delay: (element.dataset.index - (element.dataset.skip ?? 0)) * duration.value, onComplete: done, repeat: -1, } ); }; return { headings, beforeEnter, enter }; }, }); ``` The animation I am getting is not doing what I had hoped. Can someone point me in the right direction? Your help would be greatly appreciated. See the Pen by s (@s) on CodePen Link to comment Share on other sites More sharing options...
GSAP Helper Posted June 22, 2022 Share Posted June 22, 2022 It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
r3plica Posted June 22, 2022 Author Share Posted June 22, 2022 I have added a simple codepen; it doesn't seem to do anything, but it should be enough for you to see what I am trying to achieve Link to comment Share on other sites More sharing options...
SteveS Posted June 22, 2022 Share Posted June 22, 2022 I'm not a vue user, but in the example you gave, I'm putting console logs in the methods and they aren't doing anything. The GSAP isn't even running. There may be a vue dev on the forum but this doesn't seem to be a GSAP issue. Link to comment Share on other sites More sharing options...
r3plica Posted June 22, 2022 Author Share Posted June 22, 2022 I think it's because of codepen; I don't use vue like that, I use vue with composition api and it does an animation, but not what I was expecting. I will see if I can get composition api working Link to comment Share on other sites More sharing options...
SteveS Posted June 22, 2022 Share Posted June 22, 2022 Try codesandbox.io. I find it works better for JS frameworks. Link to comment Share on other sites More sharing options...
r3plica Posted June 23, 2022 Author Share Posted June 23, 2022 Hi, thanks for that. I have created this example: https://codesandbox.io/s/vigorous-pascal-s258v3 As you can see, it doesn't stop in the middle. In my application, it does stagger, so not sure why it doesn't in this example. Like I mentioned, I am trying to replicate this: https://www.gotolstoy.com/ Link to comment Share on other sites More sharing options...
SteveS Posted June 23, 2022 Share Posted June 23, 2022 @r3plica What part of the gotolstoy site are you attempting to replicate? Link to comment Share on other sites More sharing options...
r3plica Posted June 23, 2022 Author Share Posted June 23, 2022 The rotating text in the header: Link to comment Share on other sites More sharing options...
r3plica Posted June 23, 2022 Author Share Posted June 23, 2022 Ok, I am getting a bit closer. I have this now: https://codesandbox.io/s/spring-smoke-b1kmgp All I need now, is to start moving the text up before the next one comes into view. Any help with that? Link to comment Share on other sites More sharing options...
SteveS Posted June 23, 2022 Share Posted June 23, 2022 For each text you'll want to make a timeline like so: const textTl = gsap.timeline() const textIn = gsap.from(textEl, { y: 50, autoAlpha: 0 }) const textOut = gsap.to(textEl, { y: -50, autoAlpha: 0, delay: 4 //pause for 4 seconds }) textTl.add(textIn).add(textOut) And then have some setup to manage when they fire. There's many ways to do that though. Someone else on the forum might have an easier solution but this gives plenty of control. update: I did some more searching and I think there's a way to achieve the effect you want without constructing timelines, and instead using stagger. But the examples I'm finding are from the TweenMax days 😕 Link to comment Share on other sites More sharing options...
r3plica Posted June 23, 2022 Author Share Posted June 23, 2022 https://codesandbox.io/s/mm49z4?file=/src/App.vue This is as close as I have got by using your suggestion, but it's still not right. Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted June 23, 2022 Solution Share Posted June 23, 2022 Looks like the following animation by our @Carl this is a great tutorial to get you of the ground 2 Link to comment Share on other sites More sharing options...
SteveS Posted June 23, 2022 Share Posted June 23, 2022 Yeah, I highly recommend the tutorial @mvaneijgen posted. That being said, here is what I was imagining: https://codesandbox.io/s/cranky-hodgkin-o86p0l Again, go the stagger example by carl is overwhelmingly preferred. 1 Link to comment Share on other sites More sharing options...
Carl Posted June 23, 2022 Share Posted June 23, 2022 thanks for the nice recommendations! here's the demo from that video in case anyone just wants to grab some code: See the Pen ExVEOPa?editors=0110 by snorkltv (@snorkltv) on CodePen I can't help with the vue stuff. 1 Link to comment Share on other sites More sharing options...
r3plica Posted June 23, 2022 Author Share Posted June 23, 2022 Thanks @mvaneijgen, that video was awesome and thanks @Carl for providing the demo. I actually watched the video and found the link in that before seeing you had posted here but it works perfectly 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