SteinarvDesign
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by SteinarvDesign
-
-
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
See the Pen 0130eb7107636464708bdfba8a44cf8d by steinarV (@steinarV) on CodePen
@Craig, @PointC Credit to you for the tip !
-
1
-
-
@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 ?
-
-
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 functionWhat is causing this problem ?
See the Pen QzMMVJ?editors=1010 by fitzsyke (@fitzsyke) on CodePen
-
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
Animate an External Svg w. GreenSock
in GSAP
Posted
@OSUblake Great advice . . . thank you !