scatterbrainz

@Dipscom Okey dokey - here's the follow up: ? -> hopefully this articulates it all easier. Here's a pen -> https://codepen.io/scatterbrainz/pen/NmjmEK for some reason the "a" won't move. IN THIS ^^ sandbox -> I had to add the dependency in. and here's another version of it via sandbox > https://codesandbox.io/s/wql01jplo5 IN the codesandbox: I did it 2 different ways: I added the gsap dependency, and I added a script reference to the CDN. in this sandbox version ... I get TimelineMax -> Not defined (no undefined) -eslint same for "Power0" -> this code I borrowed from Shaun Gorneau -> and augmented slightly. only for referencing. The goal is to have the dependencies locally available -> so there is no url referencing -> perhaps its stored in a node_module (i've seen) that, but I can't seem to access them. I just keep coming up with (unexpected tokens). So I don't know. (this is on a local version). hope that helps

OK: I'm trying to make an create local availability of gsap methods that are accessible in the javascript file locally. SO what is required to locally add the gsap methods to the package.json so that when i run npm build - it includes the gsap dependencies and methods so that the javascript will animate/run properly. (is that better)? Logic: If I create an install (maybe its a bundled install) of dependencies in a plain js project. Then I can also create the same install into a react app build/install. let me see if I can generate a working example - I'll post here via codepen. as a follow up

GSAP - NPM - INSTALL - instructions -> @Dipscom Thank for the response. It does and it doesn't - how's that for an answer - LOLOL. So I'm creating an introduction page (animation of maybe 15 seconds in total length maybe 5 or 10). For my own website (I'm a freelance web design/developer). Basically because i'm totally fresh - and new - I generally like to learn things TWICE, but sometimes its three way. The first demo run is with french vanilla js (my nickname for plain js). 1 project folder / 1 js file / 1 html /1 css. Then i flip that to a REACT APPT. I modify the JS so that it becomes component driven and easy used by REACT. REACT too my knowledge doesn't utilize external resources (althought it might be able to). Since react you would run an NPM BUILD on the folder, so that ONLY the needed dependencies are bundled. That is why I'm trying to demo it with installed dependencies, so I can see how it all relates when I do the react built. - I've already shaken the tree. I couldn't add the screen shot - max limit for posting images hit. So that's why you don't see it, but I followed the principals on the npm doc's. Does this information help? Also please understand - I don't do the blame game. He said She said - blah blah blah. My only point in making the reference is saying I have a info A and info B. Are both truth? or both false? If one holds true given environment & criteria group 1 and info B holds true given environment and criteria group 1, that's great, so long it as that's clear. For me its just about complete information. (Its like when I was learning JS /jQuery at first - one educator said to use eventListerner's to flip page as a re-direct. Another said you never use an eventlistener that way you use an <a> tag. Its not consideration/concern to me whether one is right and one is wrong, rather, more critically - WHEN TO USE WHAT - for convention/best practices / original intended use / modified use / extended use / etc.etc.etc. - That is all. Maybe GSAP isn't the best option for the animation - if you look through the forum posts - i believe there's one dated yesterday - it has a diagram of what I'm trying to accomplish. I just need it to be easy. I mean it doesn't make sense to spend 40 hours constantly banging the head to get something to work. ....Best Wishes, look forward to your thoughts.

Hey Everyone, I've made a few posts about trying to utilize GSAP methods for some simply animations. Shaun Gorneau has been great about supporting methods usage in a javascript file. That's grand. Also got feedback about how I was setting up a file from another moderator - that was great too. But I AM still BANGING my head trying to get this to be accessible. So here's my steps.....lets see if we can resolve this. terminal window: (OSX) > mkdir demo >npm install >npm init -y >npm l -g gsap I get the a node_modules folder with GSAP files in it. There's no reference to GSAP in the package.json, but there is in the package-lock.json. When I utilize the line of code (found on your website) -> I get the following error if I try to change it and give it a direct path rooting -> './node_modules/gsap' -> i get another error last a poster -> OSUBlake -> posted DO NOT INSTALL FROM NPM. But in the documentation it says to do exactly that SO .....???????

Hey Everyone, I have 2 pseudo mini-projects. #1. is a demo run for #2. So I read over the documentation. IN a brand new folder via for a project - You do... npn init. npm i -g gsap then i launch vs code via the CLI cmd -> code . (vs code). So when I go to write the demo.js import TweenMax from "gsap/TweenMax"; It flags n' fails. making the methods within unusable. @Shaun Gorneau > was awesome about providing a demo for my snaking letters, in his example it looks as if jQuery has been employed. >>> https://codepen.io/sgorneau/pen/dLOpKx What makes this perhaps more challenging is that my intention is to make the DOM elements dynamically. Which exactly what it should do. The only thing I'm lost on, is how to bundle it all into a french vanilla (LOL - my nickname) JS app. its a minified demo run in plain JS, because there's actually FOUR (4) letter snakes all going into the middle box, with pulsing DOTs as they enter. (The Dots can simply be a CSS function with alternating opacity. To elaborate on what the original question: that @Shaun Gorneau was very helpful with ... here's further ... and a pen ... I may have this COMPLETELY wrong... here's a pen, I started if its useful ... https://codepen.io/scatterbrainz/pen/LvWjjm (the pen is NON-functional) probably because the pen reads css before the JS. Phase #2. Port over this entire mini-demo into a REACT build. SO when I run the npm build cmd from the CLI all the dependencies are self contained -> perhaps I'm missing how websites function and pull in dependencies for things to run. Any guidance here would be great. Best Wishes... scatterbrainz (at the best of times - LOL)

This is what I'm looking to do ..... detailed - hopefully this helps.

@Shaun Gorneau Here's a second sketch of the what I'm trying to do. Its very similar to like a snake in a game that appears from the edge of the display goes around and disappears down a hole, the only difference is - this is with text, not a solid line.

@Shaun Gorneau Thank you for responding. This is kinda my codepen, But its not 100% accurate its kinda a work in progress. Here's a slightly updated version > https://codepen.io/anon/pen/MRbKEQ so the goal is to have a string take "abc abc abc abc abc abc" have starting point, in this case if we look at the viewport > middle of the box on the rigth of the vieweport so if the center grey box >>> SEE my sketch below: IN essence, take any string of characters, starting with character1 of word1, change that specific character to opacity: 1, but leave rest at opacity:0 until they timed to appear, and make them all move together as 1 solid line so it makes sense, as seen in the purple and dark blue bubbles in the diagram - below. Hope this helps? ( i keep thinking its a loop in JS to do this, but when I tried to split the letters via DOM elements, the rate or transition drastically changed). The only other consideration is there's 4 different strings coming from 4 sides of the square so in this situation group abc starts first in reverse (right to left), but there's also a top, left and bottom that are all timed to start 1 second after each other, and end 1 second after each other, all entering each side of the square.

Hey All, I'm looking at GSAP as a solution to a small challenge I'm having. You can review the codepen version here >> > https://codepen.io/anon/pen/MRbKEQ for some reason when I split up the characters into 3 different animation timing sequences (s1/s2/s3) - it failed on codepen, but works in my browser. You see the text move on the screen - this is great, except that when the string reach the inner box, the WHOLE text disappears, instead of character by character as it enters the center box. I was hoping GSAP might alleviate this and make it smoother. The goal is to get each letter to appear in its respective origin, transition across the screen to the center box and disppear. When I attempted to utilize GSAP via npm install -g gsap and within the .js file with import TweenMax from "gsap/TweenMax"; -> it bombs with "syntax error -> unexpected identifier? so I'm not sure what I'm doing wrong? This is a trial run - I will later be altering this demo as part of an animated intro component to a react file. So understanding how it works will be key to using it in react based apps (component driven). I will also be making the HTML elements within the components dynamically. If anyone can point in my right direction - really appreciate it. Thanks PS: I was using the install / import as seen here ->>>> https://greensock.com/docs/NPMUsage