Jump to content
GreenSock

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

Duo

SimplyGreen
  • Content Count

    4
  • Joined

  • Last visited

Community Reputation

2 Newbie

About Duo

  • Rank
    Newbie
  1. Thanks so much for getting back to me. That method worked perfectly.
  2. Hi, I'm a member of the GreenSock club and successfully downloaded and installed GSAP 3.0 and bonus plugins using the gsap-bonus.tgz method with YARN. I'm now trying to import the DrawSVGPLugin but it's throwing errors in my Terminal and then also in my browser. This is the setup in my main app index.js: import 'dom4' import 'svgxuse' import domready from 'domready' import { gsap } from 'gsap' import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin.js' import Swup from 'swup' import SwupBodyClassPlugin from '@swup/body-class-plugin' import SwupJsPlugin from '@swup/js-plugin' import GlobalHeader from '../global-header' import ProjectGallery from '../our-work/project-gallery' import Contact from '../contact' import GlobalFooter from '../global-footer' import ScrollBtn from '../scroll-btn' import InView from '../in-view' gsap.registerPlugin(DrawSVGPlugin) This is the error that is showing in my Terminal: ERROR in bundle.js from UglifyJs SyntaxError: Unexpected token: keyword (var) [./~/gsap/DrawSVGPlugin.js:208,0] And this is the console error in my browser (Chrome): Uncaught SyntaxError: Unexpected token 'export' I can see the plugin inside the node_modules/gsap folder. I'm also running webpack@1.15.0 Any help would be greatly appreciated. Thanks, Dayne
  3. Hi PointC, That has worked perfectly. Thanks so much.
  4. Hi, First of all. We love Greensock. We have used it on about 3 new client projects already and find it incredible! So great work! I'm trying to get the following animation to work however and am having some issues. This is the following animation. See screenshot. The animation should be as follows: The T appears The line from the T to the D animates the stroke with DrawSVG. The D appears The line from the D to the L animates the stroke with DrawSVG. The L appears The line from the L to the T animates the stroke with DrawSVG. This is the following code that I have: const tl = new TimelineLite({delay:0.5, repeat:-1, repeatDelay:2}); tl.from(this.letterT, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut}) .from(this.line1Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone}) .from(this.letterD, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut}) .from(this.line2Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone}) .from(this.letterL, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut}) .from(this.line3Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone}) Now if I'm correct each .from should run after each other. This is working fine with the letters but the line ones run the moment the animation starts. I've tried using the Position Parameter on those line ones to no avail. Any help with this would be greatly appreciated. Thanks
×