Jump to content

Eugene Rayner

  • Posts

  • Joined

  • Last visited

Everything posted by Eugene Rayner

  1. 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.
  2. 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.
  3. 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!
  4. 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
  5. 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
  6. lol just found it, please lock/delete this post
  7. 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!
  8. 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
  9. 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.
  10. no worries at all guys, thanks for the information
  11. 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?
  12. 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.
  13. 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
  14. 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
  15. 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
  16. OSUblake, I am forever in your debt. That's a great piece of advice. Thanks a lot
  17. 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
  18. 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
  19. Hey PointC, Thanks a lot for your help! A true javascript pro at work. Ill be holding onto this and studying it. Cheers! Eugene
  20. 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!
  21. Thought i'd show the Landing page, thanks again for your help! http://storylab-lp.webflow.io/#section3
  22. dude you're awesome. Thanks a lot for this! I appreciate your help. Thanks again
  23. Sorry, that must be confusing. I can barely explain myself sorry! I've made a 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
  24. 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!
  25. 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!