SteinarvDesign

@OSUblake Great advice . . . thank you !

I wanted to animate an external Svg w. GreenSock/Gsap. I have used svg paths for the letters. Here is the result. My external Svg is a Codepen asset. SteinarV Edit : The animation is now created after the SVG has loaded using fetch(" ...") and async/await. The animation is triggered on 'page load'.

Split Svg Text w. GSAP Stagger I have turned my text into paths. Here is a demo https://codepen.io/steinarV/pen/0130eb7107636464708bdfba8a44cf8d @Craig, @PointC Credit to you for the tip !

@Jack Okay . . . I understand. May be this is not a GSAP-specific question . . . but how can I call svg code from an external file or an asset on codepen and use it in my GSAP animation ? @Cassie One svg can work. If I position the <div id="wrapper" > <h1></h1> </div> , with the text for the 'splitText plugin', dynamically with respect to the group element <g id="letters" > </g> with the handwriting animation : let letters = document.querySelector('#letters'); let lettersRect = letters.getBoundingClientRect(); wrapper.style.top = lettersRect.bottom + 'px'; Because the 'splitText' plugin does not work with the svg <text></text> element . . . or does the 'splitText' plugin work inside a svg ?

How can I write a more effective code with GSAP ? I have used two SVGs, 'topSVG' and 'bottomSVG'. The 'topSVG' is a responsive reference for the top of a 'wrapper' div for the 'splitText'. The 'bottomSVG' has overflow: visible . . . so the particles can flow into the 'topSVG'.

Okay, thank you . . . that was straightforward.

The function 'updateSize' makes a jump when display size height (h) = display size width (w). How can I rewrite the function 'updateSize' with Gsap to give a soft, linear scaling from desktop to mobile ? Can I use Gsap easing ? FUNCTION-UPDATE-SIZE.txt

@Cassie Thank you . . . repeating the timeline inside the recursive function is a solution.

I have 2 functions: generateParticles and animateParticles ( w. an inner timeline ). I also have a 'Main Timeline': gsap.timeline( { repeat: -1 } ).call( animateParticles, [numParticles - 1], '-=0' ); The problem is that 'animateParticles' executes only ONE time - the function will NOT repeat. How can I make the function 'animateParticles' repeat itself after the first execution - play multiple times ?

I have recently become a Club GreenSock member - ShockinglyGreen, and have installed the GSAP bonus plugins on my computer. I am testing GSAP with this setup: html, css, js, CDN files and a 'scripts' folder. For testing I am using the code in 'Toggle button with javascript svg animation' by @fitzsyke 'Artem' on codepen . I am using these scripts in the html file. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js" integrity="sha384-..."crossorigin="anonymous"></script> <script src="./scripts/MorphSVGPlugin.min.js"></script> <script src="./scripts/CustomEase.min.js"></script> There is a problem with: const morphSVGPlugin = MorphSVGPlugin; - in the js file and morphSVGPlugin.pathDataToBezier - also in the js file Here is the error: script.js:40 Uncaught TypeError: morphSVGPlugin.pathDataToBezier is not a function What is causing this problem ?

GSAP with html, css, js, CDN files and a 'scripts' folder for the bonus plugins is the best solution so far. A project with a bundler - Webpack or Parcel - is more problematic because of the large number of dependencies the bundler relies on. Creating a .npmrc file within my project folder and installing via: 'npm install gsap@npm:@gsap/shockingly' is working, but several security vulnerabilities not related to GSAP is a problem.

I have been learning/practicing React w. hooks in 2021 and want to stay focused on React as much as possible. GSAP with html, css, js, CDN files and a 'scripts' folder for the bonus plugins is the best solution so far. A project with Webpack or Parcel is more problematic because of all the dependencies that the bundlers have. Creating a .npmrc file within my project folder and installing via: 'npm install gsap@npm:@gsap/shockingly' is a good solution, but this solution comes with several security vulnerabilities not related to GSAP.

I also never use commands to open files. I open them manually. 'myproject > npm set editor code' followed by 'myproject > npm config edit' did NOT work for me. 1) There is a npmrc file in C:\Users\SteinarV\AppData\Roaming\npm\node_modules\npm\npmrc. Maybe I can open that file manually, and paste in these lines: '//npm.greensock.com/:_authToken=<my auth token> @gsap:registry=https://npm.greensock.com' But I can NOT open this npmrc file with the 'Visual Studio Code' editor. 2) Or maybe I can create a .npmrc file manually in my project root folder, and paste in the above lines ? 3) Then the first time that I install GSAP to a project I need to install via: npm install gsap@npm:@gsap/shockingly

Workflow in Visual Studio Code, Windows 10: 1) First I created a fresh React project with: npx create-react-app my-project 2) Then I downloaded the 'GSAP 3 with Shockingly Green bonus files' ZIP file, version 3.8.0 3) and added the gsap-bonus.tgz in the root directory of my project 4) When I installed the file with : my-project > npm install ./gsap-bonus.tgz, I received the message: added 1 package, and audited 1946 packages in 10s, 58 vulnerabilities (16 moderate, 40 high, 2 critical) 5) After installation: my package.json file looks the same as in the 'module install' video. How can there be that many vulnerabilities in an 'up-to-date' GSAP installation, and do I need to fix this ?

In a Vim editor I can open the .npmrc file with this command: myproject $ vim ~/.npmrc <ENTER> How do I do this in Visual Studio Code ? 1) myproject $ vscode ~/.mpmrc <ENTER> or . . . 2) myproject $ npm set editor code myproject $ npm config edit