Eugene Rayner

December 6, 2021

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.

September 8, 2021

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.

September 8, 2021

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!

July 7, 2021

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

July 7, 2021

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

July 7, 2021

lol just found it, please lock/delete this post

July 7, 2021

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!

July 7, 2021

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

June 27, 2021

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>

</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.

June 27, 2021

no worries at all guys, thanks for the information

June 27, 2021

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?

November 22, 2017

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.

November 22, 2017

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

November 9, 2017

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

See the Pen aVpMww by erayner (@erayner) on CodePen

November 7, 2017

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

October 31, 2017

OSUblake, I am forever in your debt. That's a great piece of advice.

Thanks a lot

October 31, 2017

Hello there,

Im trying to make some cool animations but I don't understand why 'onComplete' isn't working.

If you click on the header text, it should first fade out the header, and then scroll, and then continue with the animation.. but it doesn't do that.

I have it at the end of my Timeline so it should be firing at the end.. or is that not how it works?

Thanks

See the Pen WXbqWN by erayner (@erayner) on CodePen

October 21, 2017

Hi there,

Im essentially trying to create some cool rotation effect animations.
I have linked my codepen.

I want the top box to roll back out another way when you click '.top'. Roll our to the right would be perfect.

I'm also trying to reduce my code footprint.. any help as to how I could possibly use more variable or a loop etc would be greatly appreciated.

Cheers

See the Pen boZZRv by erayner (@erayner) on CodePen

August 20, 2017

Hey PointC,

Thanks a lot for your help!

A true javascript pro at work. Ill be holding onto this and studying it.

Cheers!

Eugene

August 18, 2017

Hi Craig,

Sorry for activating this topic again,

I was wondering if you could tell me how I can edit the codepen above to display 13 objects instead of 4?

I've been trying to make it work, but with no luck.

Thanks!

August 15, 2017

Thought i'd show the Landing page, thanks again for your help!

http://storylab-lp.webflow.io/#section3

August 15, 2017

dude you're awesome. Thanks a lot for this! I appreciate your help. Thanks again

August 14, 2017

Sorry, that must be confusing. I can barely explain myself sorry!

I've made a codepen.

See the Pen VzMEQw by erayner (@erayner) on CodePen

best to open on desktop because no media queries

Essentially, I want to have the videos outside of the mask to be invisible until they are dragged into the mask. The mask is the square with the red border. and if one of the elements is half way in, then it needs to snap to the mask.

Any help greatly appreciated.

Cheers

August 14, 2017

Hi PointC,

Thanks for your quick response.

This works really well. Thank you!

Could you please explain this? {x:this.x/2+"%"} It's a calculation I can't figure out.

Also, is there a property I can use that will 'snap to' a container on release?

I can use

onDragEnd:function() {
		console.log("drag ended");
	}

But then how do I go about telling it that I want one of the children of the element that is sliding to 'snap to' a mask?

Thanks!

August 14, 2017

Hi there,

My company recently has me working with a software called 'Webflow'. I figured out how to integrate greensock on webflow.

here is my code

<script>

  //draggable content
  Draggable.create("#DraggingArrow", {type:"x,y", edgeResistance:0.65, bounds:".slider-bar", throwProps:false});

</script>

Now my question is, how do I go about telling greensock, or the browser, that once #DraggingArrow is at say.. 50% of .slider-bar, do this?

See attached screenshot for what I am trying to make

Thanks in advance!

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Eugene Rayner