ShesADev Posted September 8, 2020 Share Posted September 8, 2020 I'm trying to add a little parallax effect to the articles I add into my project from contentful. Even after using `this.nextTick`, it seems like the articles are loading in after the timeline initializes. Can someone help me with getting the dynamic elements to load before the timeline? I don't want to move my gsap to the updated() lifecycle hook, since that seems unnecessarily heavy. See the Pen MWyQEpO by shielaNFA (@shielaNFA) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 8, 2020 Share Posted September 8, 2020 Hey ShesADev and welcome to the GreenSock forums. Why not put it in the axios callback? axios .get("https://cdn.contentful.com/spaces/byjig6lw75ot/environments/master/entries?access_token=ZOE2lRg1IvM98stWEwp_C_HMdW-JFqFgFg_SwYFEbpw") .then(res => { res.data.items.forEach(item => { if(item.sys.contentType.sys.id === "blogPost"){ if(item.fields.featured === true) { this.featuredArticles.push(item.fields) } else { this.nonFeaturedArticles.push(item.fields) } } }) let tl = gsap.timeline({ scrollTrigger: { trigger: "#article-preview", start: "top center", end: "bottom top", scrub: true, markers: true } }); gsap.utils.toArray(".cat").forEach(cat => { const depth = cat.dataset.depth; const movement = -(cat.offsetHeight * depth); tl.to(cat, {y: movement, ease: "none"}, 0) }); tl.fromTo(this.$refs.article[0], {y: 80, opacity: 0.5}, {y:-50, opacity:1, duration: 1}); tl.fromTo(this.$refs.article[1], {y: 30, opacity: 0.5}, {y:-20, opacity:1, duration: 1}, "-=1"); tl.fromTo(this.$refs.article[2], {y: 50, opacity: 0.5}, {y:-20, opacity:1, duration: 1}, "-=1"); }) 1 Link to comment Share on other sites More sharing options...
ShesADev Posted September 8, 2020 Author Share Posted September 8, 2020 @ZachSaucier Thanks for responding! I seem to get the same result as before if I put it in the axios callback. The images that I added manually are animating fine, but the articles themselves don't look like they're animating. Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 8, 2020 Share Posted September 8, 2020 This is 100% a Vue question... You might not receive aid here as this forum is focused on GSAP. I know I'm not good with it this.$refs.article is undefined. It doesn't look like you're ever adding refs? 1 Link to comment Share on other sites More sharing options...
ShesADev Posted September 8, 2020 Author Share Posted September 8, 2020 @ZachSaucier Hmm, you're right. I'll try and get help with Vue. I declared refs in my template - even if I change it to explicitly reference the article by class name, it doesn't seem to work. Actually, on initial load, none of the animations work, it's only when i make a change to the pen and it reloads that the animation on the images start working. I'll be sure to create a post on Vue forums for help on this issue. Thanks for your help! Link to comment Share on other sites More sharing options...
elegantseagulls Posted September 8, 2020 Share Posted September 8, 2020 Hi @ShesADev, I've worked a fair bit in Vue, but (strangely) haven't done much animating in it. This may be of help though: https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle Also worth looking at is Sarah Drasner's Intro to Animations in Vue Article: https://css-tricks.com/intro-to-vue-5-animations/ 2 Link to comment Share on other sites More sharing options...
ShesADev Posted September 8, 2020 Author Share Posted September 8, 2020 @elegantseagulls Never knew how in depth you could do animations in Vue, great article. Thanks for this! Link to comment Share on other sites More sharing options...
Muhammad Mabrouk Posted March 3, 2022 Share Posted March 3, 2022 @ShesADev I'm also using Vue and I'm having the same issue now, any updates on this. Link to comment Share on other sites More sharing options...
OSUblake Posted March 3, 2022 Share Posted March 3, 2022 If you're having issues, start a new topic and include a minimal demo. You can use CodeSandbox for Vue. Thanks! 1 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