Eugene Rayner

hey mate, I ended up paying someone to help a bit haha! hope this helps import { gsap } from "gsap"; computed: { meAnimation(){ return gsap.timeline({paused:true}) .to('#me', {x:200, rotation:360/4, transformOrigin:'center'}) }, }, methods:{ hoverIn(){ this.meAnimation.play() }, } Chuck it on a hover or a click before attempting mounted. Mounted has some issues with when things load especially with animations.

Okay it's all come back to me. LOL! I'll note the answer here incase someone comes across a similar problem from the Vue community. mounted() { // fix was to get the block ref and then get it's elements const { block } = this.$refs //element const whole = block.getElementsByClassName("paragraph-image-block--text") const h3 = block.getElementsByTagName("h3") gsap.timeline({ scrollTrigger: { trigger: whole, markers: true }, }) .to(h3, { rotation:90, duration: 2 }) }, Essentially instead of trying to get A element, just target the specific ones you want and use the $refs to get the whole block itself.

A few months later and i'm back I still can't get it to work aye. I am getting an out of scope error. I assume it's got something to do with the $refs. I am using gsap utils like you've suggested, but I am getting an out of scope error which I assume is related to my $refs. The example uses this.$el but I am inside the component so that doesn't really exist for me... hence $refs methods: { animate() { const { block } = this.$refs.block const whole = gsap.utils.selector(block) gsap.timeline({ scrollTrigger: { trigger: whole, start: "top top", markers: true }, }) .to(whole, { rotation:90, duration: 2 }) } }, mounted() { this.$nextTick(() => this.animate()); }, Any help always appreciated guys, thanks!

Hey there, welcome to my post. I'm building my portfolio site in Vuejs and have decided to go with GSAP as I love GSAP I've split my code into pages and components. The pages send data over to my components so that it's easier to manage the content. The issue I am facing is that I don't want to give separate Ids to each render of the component. Take this code example which I have simplified for the purpose of this post <template> <div class="paragraph-image-block"> <div class="paragraph-image-block--text"> <h3>{{title}}</h3> <p v-for="(paragraph, index) in paragraphs" :key="'paragraph-' + index" v-html="paragraph"></p> </div> <Icon :name="image"/> </div> </template> <script> import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); export default { name: 'Paragraph', methods: { scrollAnimation() { gsap.to("h3", { opacity: 1, duration: 2, scrollTrigger: ".paragraph-image-block"}) gsap.to("p", { opacity: 1, duration: 2, scrollTrigger: ".paragraph-image-block"}) } }, mounted() { this.scrollAnimation(); }, } </script> <style> .paragraph-image-block h3, .paragraph-image-block p{ opacity: 0; } </style> Say I have like 3 of these components rendering on the page. Each component has a class of paragraph-image-block and each contains 1 <h3> and multiple <p> tags. When the component is scrolled into, I want to just make the opacity go from 0 to 1. I have set the initial css to be opacity 0, and they do work, but the problem is, because I am saying when this class is scrolled into, show them, then all of the classes with the same class are showed at the same time. I want them to each show only when the component is scrolled into.. if that makes sense. Any help greatly appreciated

Yeah and for anyone else looking to load specific plugins - follow Cassie's link -> click install helper -> click the NPM tab -> select the plugin you want -> copy the code it producers

lol just found it, please lock/delete this post

Hey there, just wondering how I can install scrolltrigger plugin via NPM? I already have gsap installed, but when I go to use ScrollTrigger, it doesn't know what it is. So I assuming I need to install the plugin ScrollTrigger but I am having trouble with it. Any help greatly appreciated. Thanks!

hey @mikel I appreciate your input! I just got back to this. Seems like I was using the wrong mouse events. The ones you are using are much better! I also implemented your code because you're right about the circumference thing. I love it. I appreicate you Mikel. Thanks again

Hey guys, new to gsap 3 (still need to read more), and newish to vuejs. just wondering if anyone can tell me what's going on here to make the 'ball' flicker on @mouseover - as if it's trying to roll back from the @mouseout. This is an animation I am working on for my Portfolio so here's the sample (hovering the face image) https://zealous-panini-8d66ea.netlify.app/ <div @mouseover="hoverIn" @mouseout="hoverOut" class="image-text-block--image" style="position: relative;"> <div class="me2"> <svg version="1.1" id="cogs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 982.4 982.3" style="enable-</svg> </div> <img class="me" :src="me" alt="Eugene"> </div> the outermost div is firing the hoverIn method. methods:{ hoverIn(){ gsap.to('.me', {x:200, rotate: 120, duration: 0.2}) gsap.to('#cyan-cog',{transformOrigin: '50% 50%', rotation: 360, duration: 5, repeat:-1, ease:"Linear.easeNone"}) gsap.to('#large-cog', {transformOrigin: '50% 50%', rotation: -360, duration: 5, repeat:-1, ease:"Linear.easeNone"}) }, hoverOut(){ gsap.to('.me', {x:0, rotate: 0, duration: 0.2}) gsap.to('#cyan-cog', {x:0, duration: 3}) } } I come from a SCSS background and have decided to use gsap for animations as it's something I want to incorporate regulary. In SCSS we can do something like .container{ &:hover{ .image{ width: 20px } } } to move the image when the container is hovered. In this case it feels like putting the hover on the outer container isn't working as suspected.. What am I doing wrong? If I could get help from anyone + any recommended articles for VueJS + GSAP that would be great.

no worries at all guys, thanks for the information

I remember purchasing shockingly green a few years back when it was lifetime membership and for some reason can't see it on my account anymore. Am I no longer a paid member?

I just thought it was weird because i've always made basic GIFs on photoshop. And I set them to 'forever loop' and i've never had a problem before. It's weird that my banners have always been forever long and not just 30 seconds.

Hello there, I built my first banners the other day and my company loves them! Small file size, and transitions look a lot better than static transitions. However, Google only let me have an ad that runs for 30 seconds. However, in the past I have had GIF banners (made in photoshop) on an infinite loop -> ie, never ending. adding {repeat:-1} to my timeline will successfully loop the banner, but google won't accept it. I am also looking at 'best practices' if anyone has a link to an article or wants to leave a note here, i'd greatly appreciate that. Thanks! Eugene

Hello there, I'm just trying to make some clean, simple, and reuseable timeline code for some banners. My company has always had me making GIF banners, but I want to show them that html5 banners are so much better Essentially, I just want to have 'breaks' between each stage element. And then if anyone has some ideas for how I can template this that would be great. Thanks! Eugene

Hello there, I've recently been exploring ways to create awesome animations and i've come across the 'canvas' element. Now i've been looking at some articles which explain which frameworks or libraries exist out there to assist in creating animations on canvas. But it's 2017 now - Almost 2018, what is the best framework I can use for the broader use of Canvas? I'd like to create some cool parallax backgrounds, or multilayer which move on scroll, for now anyway. As always, any help greatly appreciated