Jump to content
GreenSock

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

Duo

ShockinglyGreen
  • Posts

    11
  • Joined

  • Last visited

About Duo

Duo's Achievements

  1. Hi everyone, I'm wondering if any of the geniuses on this incredible forum could potentially point me in a direction to possibly modifying the ScrollTrigger Layered Pinning Demo (https://codepen.io/GreenSock/pen/KKpLdWW) to behave to something similar to this: https://gmeadow.com/ I can see that https://gmeadow.com/ is actually using GSAP and ScrollTrigger but I have no idea how to achieve some of functionality they've implemented (i.e. scroll-jacking/locking, parallax effect on section transitions etc). Any help or pointing in the right direction would of course, be greatly appreciated. Thanks, Dayne
  2. Duo

    GSAP Animated Counter

    I managed to find great example of what I'm kind of wanting from the wiz @PointC: https://codepen.io/PointC/pen/eMxmwN
  3. Duo

    GSAP Animated Counter

    Hi, I'm trying to figure out how to tackle this type of animation. Basically our client wants to have a starting figure (say for example: 2,300,000,000) and then increment that number by 23000 each week. I want to try and tackle the animation first though. I've seen example of a counter using GSAP (https://codepen.io/snorkltv/pen/NWRGwYQ, https://codepen.io/akapowl/pen/b2c2c56064274fd14620faa9d5537e40) but these are really just changing the HTML. I really need it to animate the numbers from bottom to top and count up. There is another example of a counter and then animating at the end once it reaches 100% (https://tofucollective.com/). Is something like this possible in GSAP? Or should I tackle it another way? Any help would be greatly appreciated. Thanks
  4. That has worked perfectly @PointC and less code too. Thanks so much again!
  5. Hi @PointC, I know I marked this as solved and it pretty much is. There is just a small issue of it like glitching at the bottom of the animation. You can view it here: https://bardee.com/ You can see right at the end of the animation it like glitches it's position. This is the code I've used to do the animation: gsap.set('[data-component="bardee-icon"] svg path', { drawSVG: false }) gsap.from("#target", { duration: 2, drawSVG: "0% 75%", ease: "none"}) gsap.from("#target", { duration: 2, drawSVG: "100% 175%", ease: "none", repeat: -1 }); I used from instead of to so that I could reverse the animation. Again, any help would be greatly appreciated. Thanks
  6. Hi @PointC, You are a superstar! Thanks so much for providing this outstanding example and in such a timely manner. Greatly appreciated.
  7. Hi, I'm trying to replicate this animated GIF using GSAP to increase performance and reduce a huge GIF load. I've tried using the DrawSVG plugin but I'm not having any luck. I was wondering if I might need to use MotionPathPlugin but I'm not sure how I go about setting the stroke value and then animating it like this along the SVG path. Any help would be greatly appreciated. Thanks
  8. Thanks so much for getting back to me. That method worked perfectly.
  9. 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
  10. Hi PointC, That has worked perfectly. Thanks so much.
  11. 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
×