Jump to content
Search Community

Never used Gsap before.

scatterbrainz test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

See the Pen MRbKEQ by anon (@anon) on CodePen

Link to comment
Share on other sites

@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 >   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.

 

Screen Shot 2019-04-08 at 12.01.49 PM.png

Edited by scatterbrainz
further explanation
Link to comment
Share on other sites

OK, I'll preface this with ... I'm a fan of "practical effects", so my ideas may not mesh well with your ultimate vision. But .. here goes.

 

Option 1 ... disappearing into the black hole immediately. Uses an offset parent with overflow hidden

 

See the Pen dLOpKx by sgorneau (@sgorneau) on CodePen

 

 

Option 2 ... disappearing into a gradient. Uses the same parent with overflow hidden ... but not offset. Overlaid by a div with an opacity gradient.

 

See the Pen EJNZZZ by sgorneau (@sgorneau) on CodePen

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...