Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'vue'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 21 results

  1. Hi! I'm having problems with some Vue components in Nuxt and SplitText. I'll try to explain: I have a global mixin that detects all [data-animation] elements with the scroll and fire an specific animation. Some of these elements are components and ha. This works fine when I use opacity, X and Y, scale, etc... but when I use Split Text it doesn't. I got an hydrate error and the animation doesn't work. This is the code for the animation: if (elm.dataset.animation === 'lines-down-up-mask'){ var split = new SplitText(elm, { type: "lines", linesClass: 'lineParent' }); var split_parent = new SplitText(elm.getElementsByClassName('lineParent'), { type: "lines", charsClass: 'lineChild' }); gsap.set(split_parent.lines, { y: '110%' }); gsap.to(split_parent.lines, { scrollTrigger: { trigger: elm, scrub: false, start: 'top bottom', }, stagger: { each: 0.1, ease: 'power1.in', y: 0, }, onComplete: function(){ split.revert(); } }); } This is one of the components: <Partners data-bg-color="white" data-text-color="black" data-logo-color="black" data-scroll-section :title="partnerList.title" :partners="partners" /> And inside the component I have this: <template> <section class="partners"> <div class="headline headline--4 partners__title" data-animation="lines-down-up-mask">{{ title }}</div> <MovingMarquee :images="partners" partner_logos /> </section> </template> I hope someone could help me, because I don't know why it happens :( Thanks
  2. Hi again all, Supplied a codepen this time. Trying to get the onEnter and onLeave animations to work in a Flip filter animation. But the assets seem to keep popping in and out but only works sometimes. Been trying to debug for a few hours now but think I've hit a wall.
  3. Hi all, Been trying to get a Vue with Tailwind implementation of the Flex Box example going for a couple of hours now but can't seem to make any headway on it. I must be missing something really simple but it just won't animate the flipping even though I'm just toggling 1 class. Any help would be greatly appreciated. Code is below. <template> <div class="flex w-screen h-screen group" @click="toggleDirection()" :class="{ 'flex-col' : col_mode }"> <div class="grid flex-1 text-5xl text-white bg-red-600 box place-items-center">1</div> <div class="grid flex-1 text-5xl text-white bg-blue-600 box place-items-center">2</div> <div class="grid flex-1 text-5xl text-white bg-green-600 box place-items-center">3</div> <div class="grid flex-1 text-5xl text-white bg-yellow-300 box place-items-center">4</div> </div> </template> <script> import gsap from 'gsap'; import { Flip } from "gsap/Flip"; export default { name: 'Home', data() { return { col_mode: false, state: null } }, mounted () { gsap.registerPlugin(Flip); }, methods: { toggleDirection() { this.state = Flip.getState('.group, .box'); this.col_mode = !this.col_mode Flip.to(this.state, { absolute: true, duration: 1, stagger: .2 }) } }, } </script>
  4. Newbie here, I'm using Vue (3.0) and I'm trying to get started with GSAP and Locomotive Scroll but ran into a couple of issues. I've tried using some sample code(bottom of post - mine is without the code to scroll images) to get smooth scrolling implemented but I've found that it adversely affects the layout of my page. A page is a div element, styled by: .full-page { min-width: 100%; width: 100%; min-height: 100vh; } So the structure of the application is: <html> <body> <div id="#app"> <div class="full-page"> ... </div> </div> </body> </html> Here is my App single file component where the scrolling code is: <template> <router-view></router-view> </template> <script> import {gsap} from 'gsap'; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import LocomotiveScroll from 'locomotive-scroll'; export default { name: 'App', computed: { tag() { return this.scroller.tagName; }, scroller() { return document.scrollingElement; } }, mounted() { this.scroller.setAttribute("data-scroll-speed", "0.5") this.scroller.setAttribute("data-scroll", "") const locoScroll = new LocomotiveScroll({ el: this.scroller, smooth: true }); gsap.registerPlugin(ScrollTrigger); locoScroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(this.tag, { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight } }, pinType: this.scroller.style.transform ? "transform" : "fixed" }); ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.refresh(); } } </script> <style scoped> </style> Note that the scrolling element is the html tag (document.documentElement). The scrolling speed hasn't changed. I'm also using a custom cursor which has size 64px by 64px and when I move it to the edges it makes the scrollbars appear (I can confirm this is because of GSAP + Locomotive scroll as everything is fine without it). The second issue that I cannot move the cursor past 100vh (you know, to scroll to the rest of the page) - I can scroll the page, just the cursor doesn't come with. Also, position: fixed elements also do not pass the 100vh point (again, works fine without GSAP) and hence they are lost when I scroll down. There's something I'm clearly missing about correctly structuring pages. I would like to keep the HTML element as my scrolling element due to the current structure of the app - is it a requirement that the scroll container cannot be the HTML/body elements? After wrapping the html in the codepen link in html and body tags and then adding the required attributes to the html tag manually, the scrolling still works as expected so I'm not sure what's going wrong. Any and all help is greatly appreciated.
  5. Hi, I'm fairly new to GS and I'm already loving it. Thanks GS! So, in the demo... Cards change to a dark green color if they are in focus (basically, 80% width) and scroll when triggered. Issue 1: If we resize the window (eg: 50% width), we will notice that the animation works but the scroll positions are all messed up, including the background-color. Any idea on what I might be doing wrong? Is this implementation correct? Issue 2: If I change my (vue) route and come back to this view, I notice the trigger points have moved way down in the doc flow and thus my triggers don't work and the animations also doesn't work. Although, if I resize the window/ refresh the browser - Everything works correctly. (I'm finding a bit difficult to demo this issue here) Kindly help me, I've been searching for a solution for quite some time... Thanks.
  6. 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.
  7. hello everyone! i wanted to show you a little excercise i made applying what i've learn with @Carl on his fantastic ScrollTrigger course. i am having a problem.. everything works fine until i click a button which fires a function that uses the ScrollTo plugin. i did add that button with the intention of giving the user the option to skip the animation (happening as they scroll) and jump to the following scene... its best if you see for yourselves what i mean. since is a VUE project i have all the logic separated on mixins. here is the link to the codeSandbox i made. https://codesandbox.io/s/help-me-world-44mr3 thanks again for reading me.
  8. I am using gsap in a component <script lang="ts"> import { DiagramSvgHelper } from '@/mixins' import { gsap } from "gsap/all" import { Component } from "vue-property-decorator"; @Component({}) export default class Diagram extends DiagramSvgHelper { // someCodeHere } </script> I would like to test the component without `gsap`for now, once i created a jest test this response comes: I used `gsap.to()` and `gsap.set()` methods Thanks all
  9. hello there beautiful people! first of all, this marvelous timeline is working as intended, the problem: "it's going to get huge" as i add more elements and i dont want to polute my Home.vue view with a long long non readable timeline... I WANT to move this code to a separated file. how do i do that? i know i have to create a separate file and put it somewhere like ../tweens/home.js and then import it on my view import { twnHome } from '../tweens/home' i did try this but it did not work.. im pretty sure i was close.. if this is kind of right... how do i access the TL controls (play, reverse..) ? THANKS A LOT for your time. i hope this makes sense!
  10. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Read the article here: https://blog.usejournal.com/vue-js-gsap-animations-26fc6b1c3c5a
  11. Hey, Im making a site with Vue and Nuxt and Im using gsap from node modules. In have problems loading the plugins I've bought from a folder. If I want to use e.g ScrollTo plugin - I've tried putting the minified script in a folder and then using it, but it throws me an error that it can't find TweenLite. How would I solve this?
  12. Hi all, I'm trying to use the ThrowPropsPlugin together with the Draggable functionality in my VUEjs website. However every time I set the property "throwProps" to true I get this error: Uncaught ERROR: No velocity was defined in the throwProps tween of [object Object] property: x I know there are already other topics with the same subject opened but I've tried the solutions mentioned in there and nothing helped. Here's my code for reference. If anyone could help it would be much appreciated. Thanks! require('../libs/ThrowPropsPlugin') import Draggable from 'gsap/Draggable' export default { mounted() { initDraggable() }, methods: { initDraggable() { Draggable.create(this.$refs.slider, { type: 'x', minimumMovement: 10, edgeResistance: 0.5, throwProps: true, bounds: this.$refs.wrapper, onDragEnd: function() { console.log('target: ' + ThrowPropsPlugin.getVelocity(this.target, "x")) } }) } } }
  13. GS Community, I am in the process of rebuilding a GSAP website into a Vue.js project. I am in the very early stages of learning Vue, here is a good, free, video series and here is a very good (but it cost 10 dollars) Udemy course. My hope for this thread is to build out a full GSAP & Vue App. I will break out each component as I go and place it in a codepen (I have quite a few things done already, it will take me some time to go back and break things out). This will be a work in progress and the codepens will be updated in phases: Phase 1: will be to get just get things wired the Vue way. Phase 2: will be to use GSAP for the animations and transitions etc. Phase 3: Build everything as dynamic/reusable components. If all goes well this will turn into a Vue/GSAP component library of sorts for everyone to reference. Blake, one of the GreenSock Moderators, has graciously offered to help guide me (Thank you Blake). Goals for the thread/project: Navigation Button Component Section Content Component Section Hero Image Component Section Thumbnail/Modal Button Component Modal Component Password Modal Component Vertical Slideshow Component (I will also to help others build out a Horizontal Version). Slide-up Tab Component Radial Button/Checkbox Form Filtering based on a sector/classname (with persistence via local storage or a Vue method, if it exists - learning as I go ) All of the above is built in a non-Vue way here http://hainis.net/dev/ Note: that only the print/advil, print/amex, print/bayer slideshow content is sorted, all the other thumbnails will load a blank modal. This site has performance issues and at times the javascript, loaded via a Djax call, for the thumbnail buttons to launch the slideshow content is not binding properly. These issues and some prodding by Blake have made me venture down the Vue.js path. Side note: I'm learning, not there yet, to do things a DRY way; hopefully under Blake's guidance I will finally get this under control and tighten up the spaghetti code that I currently have. Okay, so that's the setup. Next post will be some useful links and a current state/NOT simplified codepen of the current Vue app.
  14. Hi ! I'm trying to animate scroll position of an element using ScrollToPlugin. It looks like it doesn't work with Vue, and i wonder why. I've been following docs and tutorials, but it's failing for some reason. PS : example includes a non-supported target, but even if using numeric value, same problem occurs. I just wanted to ask for support of this fashion at the same time :) Thanks a lot !
  15. Hoping someone can help me figure this out. I am rotating a fontawesome icon with TimelineLite. It works when I grab the element using $refs, but not when I use document.getElementById. What is interesting is that if I console.log the element selected by the two different methods, I get slightly different results: console.log(this.$refs[this.collapseId]); <svg data-v-56894cab="" aria-hidden="true" data-prefix="fas" data-icon="angle-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" id="section-arrow" class="svg-inline--fa fa-angle-down fa-w-10"><path data-v-56894cab="" fill="currentColor" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z" class=""></path></svg> console.log(document.getElementById("section-arrow")); <svg data-v-56894cab="" aria-hidden="true" data-prefix="fas" data-icon="angle-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" id="section-arrow" class="svg-inline--fa fa-angle-down fa-w-10" style="transform: matrix(-1, 0, 0, -1, 0, 0);"><path data-v-56894cab="" fill="currentColor" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z" class=""></path></svg> The problem is that I need to trigger animation of the same element by click handlers in two different components. The $refs selector works within the component where the target actually resides, but I have to use getElementById in the other component because one component cannot access the $refs of another. Anyone addressed this problem before? The Greensock docs suggest that you can use getElementById, but it is not working for me. Maybe it's a vue thing?
  16. There are 4 same sized pictures that's I have cut in 4 equal parts, the problem is I can't make them animate on hover. The part I have hovereda should become wider. I tried to make it this way - but this example doesn't work with reactive variables in Vue, I'd declared in object with coordinates.
  17. Demo: https://codesandbox.io/s/n34pvjxyxj Hi, fellow GSAP'ers! The topic of playing a timeline in reverse keeps troubling me. The Demo above is one, where, within Vue, a parent component calls function on a child component (using $refs). As the console output shows, the functions are indeed called, but the animation is not played in reverse. I do not understand why, because: - the timeline is returned to a var, right? - the staggered animations use `staggerFromTo` , even though I assume that using any of the other two should eventually work, too What am I doing wrong here (again)? Do I misunderstand the idea of having the timeline saved to a variable (here: animateLogo)? Are reverse animation on timeline using a stagger feature not possible? (I doubt that! It's GreenSock!) Thanks you in advance! PS: the actual GSAP-related code parts are kept as short as possible. Please ignore the other stuff, which is just there to wrap the letters... (no, I am still not using SplitText... shame on me!)
  18. Me again ?. My boss and I have been having trouble importing the Physics2D plugin into our Vue application. I added it the the gsap/node_modules folder and tried to import it as seen in the image. I keep getting an error that says "This dependency was not found: * TweenLite in ./node_modules/gsap/Physics2DPlugin.js To install it, you can run: npm install --save TweenLite" But I can import TweenLite and it is also in the gsap/node_modules folder so I am not sure how to resolve it. I was able to import the ColorPropsPlugin just fine but cannot get the Physics one to load. Any suggestions?
  19. I'm learning both vue.js and greensock and looking to understand how to use these two wonderful tools in tandem. The position: as I understand it, the point of using vue.js is that you don't need to manually update the dom. Instead, you bind data properties and vue then handles dom updates for you. All you do is change the data property. I have explored using TweenLite and passing in as the first argument something from the reactive data properties of a vue component, e.g. <template> <svg width="20rem" height="20rem" viewBox="0 0 100 100"> <rect :x="rect1.x" :y="rect1.y" :width="rect1.w" :height="rect1.h" :fill="rect1.f" /> <circle id="circle1" class="fill-dark-blue" cx="60" cy="60" r="10" /> </svg> </template> <script> export default { data() { return { // below are not dom elements, but are bound to dom elements by vue rect1: { x: 14.696, y: 13.414, w: 47.574, h: 30.602, f: '#ebebeb' }, // ... }, }, // } // e.g. in mounted(): TweenLite.to(this.rect1, 1.0, { w: 10, h: 50, f: '#ffd700', ease:Power4.easeOut }); What this is doing is tweening the data property which vue then reactively updates each time the data property is changed by TweenLite. i.e. we're tweening a vue data property, which is then reactively updated on each change. It all works fine, which is very cool. However, I cannot use, e.g. { className: 'light-yellow' } in the TweenLite vars, the reason being that to accomplish that animation, gsap will attempt to do it by first sniffing the css properties, then adding a style tag (as seen in action on the excellent intro to greensock short video on this site). That does not work because (my guess) the selector passed to gsap is not actually a dom selector but the vue data property. Hence, gsap doesn't seem to be able to get the dom hook so can't apply the style tag. At least, that's my diagnosis of why it is not working. In contrast, I can get the className animation working by doing this: TweenLite.to('#circle1', 1.0, { className: 'fill-light-blue' }); What the above is doing is going into the dom directly via an id tag and so bypassing vue's data binding. The problem is that in this case, if I have a complex svg, I can no longer benefit from vue's ability to bind into anywhere in the dom simply by updating a data property. I'll have to get into dom navigation. This seems wrong. What does all this mean? Does it mean quite simply that if I want to tween vue data properties (for the benefit of not having to navigate the dom) that the feature set I am going to have available to me from gsap is going to be necessarily limited? I'm not entirely sure at this point how much of TweenLite & Max's power is going to be curtailed by this pattern, as I'm still learning. At this point I really want to grab a couple of good patterns for vue & gsap and get plenty of practice. Just need to settle on a limited set of patterns to practice with. The goal I have in mind here is, say, making a fairly complex svg and animating its component parts with greensock, via vue. Am I doing this right ? Thank you very much for discussion.
  20. Hi, is there a way to use the gsap Draggable in Nuxt.js? I get the error "navigator is not defined" in file "node_modules\gsap\Draggable.js" line 391 _isIE10orBelow = (((/MSIE ([0-9]{1,}[\.0-9]{0,})/).exec(navigator.userAgent) || (/Trident\/.*rv:([0-9]{1,}[\.0-9]{0,})/).exec(navigator.userAgent)) && parseFloat( RegExp.$1 ) < 11), //Ideally we'd avoid user agent sniffing, but there doesn't seem to be a way to feature-detect and sense a border-related bug that only affects IE10 and IE9. I am referencing gsap and Draggable inside my .vue file by: import TweenMax from 'gsap' import Draggable from 'gsap/Draggable' I am guessing this is due to Nuxt doing a server side render and not having a window/navigator object?
  21. I've been using Vue.js a lot lately, and working with the webpack template. Importing GSAP after `npm install -s gsap` works correctly, but the ScrollToPlugin has some oddities. In one of my Vue components, I have this: import "gsap"; import ModifiersPlugin from "../../../node_modules/gsap/src/uncompressed/plugins/ModifiersPlugin.js"; And ModifiersPlugin works great. But when I try to do the same for ScrollToPlugin... import ScrollToPlugin from '../../../node_modules/gsap/src/uncompressed/plugins/ScrollToPlugin.js'; I get this error in Vue/Webpack ./~/gsap/src/uncompressed/plugins/ScrollToPlugin.js Module not found: Error: Cannot resolve module 'TweenLite' in /Users/shaw/Sites/green-mountain/node_modules/gsap/src/uncompressed/plugins resolve module TweenLite in /Users/shaw/Sites/green-mountain/node_modules/gsap/src/uncompressed/plugins looking for modules in /Users/shaw/Sites/green-mountain/node_modules /Users/shaw/Sites/green-mountain/node_modules/TweenLite doesn't exist (module as directory) resolve 'file' TweenLite in /Users/shaw/Sites/green-mountain/node_modules resolve file /Users/shaw/Sites/green-mountain/node_modules/TweenLite doesn't exist /Users/shaw/Sites/green-mountain/node_modules/TweenLite.js doesn't exist /Users/shaw/Sites/green-mountain/node_modules/TweenLite.vue doesn't exist looking for modules in /Users/shaw/Sites/green-mountain/node_modules /Users/shaw/Sites/green-mountain/node_modules/TweenLite doesn't exist (module as directory) resolve 'file' TweenLite in /Users/shaw/Sites/green-mountain/node_modules resolve file /Users/shaw/Sites/green-mountain/node_modules/TweenLite doesn't exist /Users/shaw/Sites/green-mountain/node_modules/TweenLite.js doesn't exist /Users/shaw/Sites/green-mountain/node_modules/TweenLite.vue doesn't exist [/Users/shaw/Sites/green-mountain/node_modules/TweenLite] [/Users/shaw/Sites/green-mountain/node_modules/TweenLite] [/Users/shaw/Sites/green-mountain/node_modules/TweenLite] [/Users/shaw/Sites/green-mountain/node_modules/TweenLite] [/Users/shaw/Sites/green-mountain/node_modules/TweenLite.js] [/Users/shaw/Sites/green-mountain/node_modules/TweenLite.js] [/Users/shaw/Sites/green-mountain/node_modules/TweenLite.vue] [/Users/shaw/Sites/green-mountain/node_modules/TweenLite.vue] @ ./~/gsap/src/uncompressed/plugins/ScrollToPlugin.js 181:2-34 Looking at ScrollToPlugin.js, it seems to be triggered by this section of code at the very end, starting at line 174, which ModifiersPlugin does not have. //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; if (typeof(define) === "function" && define.amd) { //AMD define(["TweenLite"], getGlobal); } else if (typeof(module) !== "undefined" && module.exports) { //node require("../TweenLite.js"); module.exports = getGlobal(); } }("ScrollToPlugin")); Looks like the `require` on line 183 is triggering the error. If I remove that block of code, the ScrollToPlugin works as expected. I haven't tested all the other plugins, but I would assume if they have that block, they will produce a similar error. Any idea what's going on?
×