dneckles

January 8, 2020

Hello.. I have the seamless loop almost working, but the diagonal changes direction when it restarts. Im not sure why that is and Im not sure the debugging technique i could use to figure it out.

I know the issue is here return (wrapperWidth-x) % 300+ "px";

I know the issue is in my math, but i am uncertain how to work it out manually

I am following the seamless loop codepen btw,

See the Pen QEdpLe by GreenSock (@GreenSock) on CodePen

Any ideas below is the codepen with the issue

Dwayne

See the Pen XWJZRad by dwayneaneckles (@dwayneaneckles) on CodePen

March 30, 2019

Quote

There is no "right way" to do it. If you get the result you want, then it's right. Sure, there are better ways of doing things, but that shouldn't be your focus while learning.

This held me up in learning, this stuff, so many ways to do stuff with html css, that it's a lot simpler to go by what you see.. Thanks

July 12, 2017

Here's the thing:

I think they are super simple examples floating around

but not much more harder than that.
I have been looking for how to do:

Shared Element Transitions - animation pattern where you reparent an element w/ a translate and tween to new pos? See tweet for example

Staggered Tweening - Animating the elements within the component

- ele1

- ele2

- ele1

- ele2

- ele1

- ele2

I dont want to only animate the header Main and footer but the elements within them. So the ele1 in <Main/> fades in right after the ele2 in <Header/>

---
Ive considered AnimatedJS but despite its power, its a completely different paradigm and more verbose code.

If anyone has suggestions on achieving the above let me know. When I figure it out I will definitely share and open source it.

With that said thanks for sharing your code zachschnackel. .

June 6, 2017

On 3/26/2017 at 2:04 AM, t.coenradi said:

I have been using React and GSAP together since react was first created.

I have tried using it in a number of ways, but have found that tweening values in vanilla javascript objects combined with the use of the greensock onUpdate function (combined with onUpdateParams) and then pushing the values into a react component has been the cleanest.

This completely avoids the need for using findDOMNode (or getDOMNode if you have an older version of React).

Hi @t.coenradi would you happen to have any kind of example of what you described?

February 26, 2017

I got it now

See the Pen RpNEYr?editors=0011 by dwayneaneckles (@dwayneaneckles) on CodePen

I think my confusion was because without reading the docs expected tl.reverse() to be like tl.play() but just play reverse.

I understand now, from reading the docs and experimenting

that it doesn't "play" the timeline, it just sets the mode or state of timeline, unless you add a number as a param

ugh

bold request gsap team, is it possible to change

reverse() to setModeToReverse()

reversed() to IsModeReversed()

jk :-D I think I got it now.

Thanks everyone for having the answers in the threads....

Carl said it what it does in a separate thread and I used Blakes Codepen

for reference
https://greensock.com/forums/topic/15617-hover-animation-which-reverses-back-to-original-state-when-mouse-moves-away/

February 26, 2017

Question for you Rodrigo, I'm having trouble with the

meaning of reverse in the example

for

Tl.pause(0).reversed(true)

The pause here means moved playhead to 0 and pause it. Then set reversed equal to true which is the original state

It started...

Does reversed() mean that it should play In Reverse?

If so then if the Ani is paused and has reversed set to true, if it's asked to play while at it's starting point then that means it stays still, correct? It shouldn't play forward right?

Despite the command to play I guess I'm not seeing how the playhead moves the very first time... if reverse is set to true

I'm definitely missing something about the reverse property.

I found this thread with an explanation but It's a little confusing

https://greensock.com/forums/topic/9468-toggle-reverse-and-play/?hl=reversed#entry69838

Hi,

This is Javascript Ternary operator:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

Basically takes an expression and evaluates it. If true the first part of the code is executed, that is before the colon, if false the second part is executed.

Normally to toggle a GSAP instance I use it like this:
var t = TweenLite.to(element, 1, {x:300, paused:true, reversed:true});t.reversed() ? t.play() : t.reverse();
In this case I'm using a GSAP setter/getter called reversed(). Reversed either gets the reversed status of the instance and returns a boolean. So if the instance is reversed means that is going backwards or is static but after playing backwards. If the instance is going forward or is completed then reversed returns true.

Now considering that you're playing the animation forward but then you hide the elements immediately, there's no need to reverse the timeline, just pause it at the beginning and then since the animation wasn't actually reversed we use the method as a setter reversed(true), therefore:
tl.reversed() ? tl.play() : tl.pause(0).reversed(true);
Hopefully this makes things clearer.

February 17, 2017

https://greensock.com/animatecc-templates

It's not native but Does the above link not do what you want? I may not be understanding your question.

February 11, 2017

Hey Blake,

Good points – I will try countering. and i forgot that transform-origin doesn't affect height at all just scaleX. Lol.

I attached is what the desired behavior should be but I think i have the answer now.

Thanks!

Edit: In addition to what Blake mentioned above

I just found that when you set the position of the div using bottom: XXpx for some reason it treats the bottom part of the div as the anchor it animates from.

Yet when you set the y pos using top: XXpx , it treats the top as the anchor that it animates from which I thought was interesting.

Thanks for the codepen as well, Blake.

February 11, 2017

Hey everyone,

I'm trying to create a sliding door effect on a responsive webpage and i cant get the bottom door to expand in the up direction.

Ive tried setting the transform origin to be center bottom but no luck.

Below is the codepen, let me know if I'm missing something?

Thanks

See the Pen vgQagv by dwayneaneckles (@dwayneaneckles) on CodePen

January 17, 2017

This is exactly why I was waiting for the advanced devs,

I will be sure to read that article.

Thank you @dipscom.

How about tweening the tween? I changed it to x rather than opacity only to make it easier to see the change.

See the Pen oBYwze by dipscom (@dipscom) on CodePen

This is one gem Carl explained in this article: https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca

Make sure you read that, there's loads of good tricks there.

January 16, 2017

i know your pain...

some ways banner devs use are to export the all text as pngs cut around the word and put them on a sprite sheet.

another way is to export all text as pngs the same size as the banner, which may seem wasteful, but its easy to position everything at 0,0

make sure to run all pngs through tiny.png afterwards.

photoshop cc has an option to generate assets automatically, once you name the layer with a png or jpg. something like that does take the tediousness out of the job. and it makes it faster.. some places ive seen use live text with css but rarely as the web font is not as good looking as the original font.

I completely hear you about the lack of a gui.

I've found that to be a bit of a gift... i can do resizes faster than in Flash.

But i see a sweet anim here and agree it would be hard to create with code.

hope i answered your question

Ad agencies send me only a storyboard and a source .psd. My responsibility to close my eyes and see the animation and code it with GSAP. They occassionally append text to storyboard frames to describe their vision more pecisely.

There is no better and more flexible solution than scripting an anim with GSAP. If You get through the painful asset exporting/optimization and css positioning, You have the clear field to play with movements, alphas, masks, rotations, spawn particles... The timeline approach is not the way. It is seems easy at first glance, but You are doomed if You want to make size mutations, or the client coming out with a brand new modification idea. Ergo there is no reason to convert a timeline to GSAP. That is a rocky road, don't go that way.

The question is: How do You make all the pixel, vector, box, ( text ) assest from that .psd, and how do You make a raw HTML from them, ready to TweenMax it?

My answer was ( after trying out all the commercial tools ) to write my own IDE which is resides in Photoshop. It exports assets, writes and formats HTML and offers me a convenient tweenScript editor, and tons of more. It's a pre alpha and not released yet, but I have to say: I can concentrate on animation now, not on the dirty HTML business.

www.bannerhost.hu/test/adFury.jpg

January 15, 2017

Thanks Kez, yea no it doesnt look good doing that

im fine with using the width.

I just wanted to make sure, there wasnt something in the docs i was missing. trying to do things the "right" way.

its not an issue

January 15, 2017

Check this out, I'm not sure it's the best way but it's "a" way. let me know if it's what you want.

See the Pen oBzgjO by dwayneaneckles (@dwayneaneckles) on CodePen

var tl = TweenLite.to($('#box'), 30, {opacity: 1});

$('#button').click(function() {
 TweenLite.to($('#box'), 1, {opacity: 1,overwrite:true});  
 TweenLite.to($('#box'), 1, {delay:1 ,opacity: 0});
});

You have to use a property called overwrite:true. and i delayed the start of the fade to zero, the same time it took to fade it to 1

The second call will overwrite the first one, if you didn't set that overwrite to be true, then neither tween would at work.

This doesnt mean it cant be done the way you had, with pause resume...but thats how i would do it.

I'd be curious to see a better way to do that though.

January 15, 2017

Hey everyone,

lets say I have a div with text inside.

tweening the scaleX squishes the text inside

but tweening the width, correctly only animates the div..

TweenMax.to(header, 2,  {delay: 2.2, width:"0px"});
//vs
TweenMax.to(header2, 1, {scaleX: .5, delay:.2,transformOrigin:"0% 0%"});

Ques: Is there a way to scale using transform/scale without scaling the text inside the division or is that just how CSS works...

on initial search, i didnt see this discussed elsewhere

Thanks in advance,

alwayz

See the Pen dNpyzj by dwayneaneckles (@dwayneaneckles) on CodePen

January 15, 2017

Hey anonty,

I couldnt follow the logic – see if you can code a quick codepen example to troubleshoot. codepen.io,

January 14, 2017

Try changing the line 8 from rotationY:60 to rotationZ:60. I did that and it no longer animates toward the user

I havent done 3d stuff in a minute, but I can see why you used rotation. That's confusing a little bit.

January 13, 2017

Hmmm... great question. I couldnt find any example that used class.

Question: Why does have to be a class instead of an id?

January 13, 2017

Just a quick heads up, I am glad to see this thread.

I have a simple example using react and gsap. (thanks to OSU Blake and these forums btw)

Its really simple but ill share

"styled-components"

Some may know I hate CSS, but I've found that using a library called "styled-components" has made using CSS a bit more of a joy to use with react. The css is separated by component, which fits my thinking better. I don't have go to a different file and scroll through what I don't need to find a particular style.

"not use greensock? I dont wanna"

To the point about ReactTransition Group on this thread, I have to say, this may sound arrogant,

but i never got the need for

React's TransitionGroup or https://facebook.github.io/react/docs/animation.html

As long as I put the code in the right lifecycle methods, my instinctive response is

"why do that when I could just use Greensock to accomplish the same with less code?"

But I am still open to it. Thanks for this thread. If its okay with the original poster, I will share my learnings here.

January 9, 2017

are you talking in the context of using ReactJs. That's the only subject where using className or inline styles come up.

Without knowing that I'd say using classes are for more if you are animating with CSS not with greensock JavaScript

Bem on its own is really nice and easy to understand

I think you may be confusing CSS and JavaScript combo of animating with the JavaScript way greensock offers but I will let the magicians of the forum chime in

December 15, 2016

cjke would u say the docs are the best place to understand these "especially regarding the virtual dom and the importance of the key attribute and lifecycle methods. " or another resource, i found the docs explanation rather technical not that helpful

edit

i found this desc very helpful from a random site

componentDidMount is executed after first render only on the client side. This is where AJAX requests and DOM or state updates should occur. This method is also used for integration with other JavaScript frameworks and any functions with delayed execution like setTimeout or setInterval. We are using it to update the state so we can trigger the other lifecycle methods.

https://www.tutorialspoint.com/reactjs/reactjs_component_life_cycle.htm

I've been using greensock since the as3 days (and love it). Over the past year I've been using React full time.

I want to echo what Steven has said. The react questions that seem to be popping up when linked to animation and/or gsap often appear to stem from a lack of understanding about how React works - especially regarding the virtual dom and the importance of the key attribute and lifecycle methods.

Jack has asked for examples of gsap breaking react (in a few threads I believe) but no examples have really popped up. There is no doubt that the linked enhancer above can help smooth out things - but you definitely can work with gsap+react without it.

Simple things to remember:

Use ref instead of findDOMNode

| In most cases, you can attach a ref to the DOM node and avoid using findDOMNode at all.

source: https://facebook.github.io/react/docs/react-dom.html#finddomnode

When using ref, prefer ref callback over the older (yet supported) string variation:

| If you are currently using this.refs.myRefName to access refs, we recommend using this pattern instead.

source: https://facebook.github.io/react/docs/refs-and-the-dom.html

Key is key

Key is super important with repeated elements because it's Reacts way of telling if its the same element or not. If an item in a loop has the same key on the next cycle, react won't attempt to unmount the old and mount a new, instead it will just update its props. This is really important for animations because you don't want the next cycle to remove an element that is currently animating.

ReactTransitionGroup

Also very important when items are being added or removed to the DOM. By wrapping your element in ReactTransitionGroup, you can delay when an element is actually unmounted - meaning you can hold off until an animation is finished before an element is removed from the vdom.

gsap is no different from all the other non-React-aware libraries out there. TinyMCE, Google Maps, etc can all work with React despite having very complex architecture. Before you scream - "but there is 'react-google-maps' and 'react-tinymce' on npm!" They are quite simple wrappers that, like above, utitilise the lifecycle methods and refs to tap into the dom while staying react.

Happy to throw some codepens together if needed.

*Edit*

Super simple example, can provide more:

See the Pen qqWJzv?editors=0010 by cjke (@cjke) on CodePen

Things to note is that the overall state is kept declarative (as per Reacts liking). The component is given props about its current state (is it animating, etc) and a child component communicates its internal state outwards via callbacks (again this is standard React - think like a normal input component, pass value={value} in and onChange callback).

During the timeline animation, the state is maintained (the counter - ironically this is set is via gsap, but the counter state count could be from clicks or anything).

December 10, 2016

Thanks so much for this, I too am getting into react and tying it in to greensock.

I will look at the key lifecycle and virtual dom concept since you mentioned it..

I've been using greensock since the as3 days (and love it). Over the past year I've been using React full time.

I want to echo what Steven has said. The react questions that seem to be popping up when linked to animation and/or gsap often appear to stem from a lack of understanding about how React works - especially regarding the virtual dom and the importance of the key attribute and lifecycle methods.

Jack has asked for examples of gsap breaking react (in a few threads I believe) but no examples have really popped up. There is no doubt that the linked enhancer above can help smooth out things - but you definitely can work with gsap+react without it.

Simple things to remember:

Use ref instead of findDOMNode

| In most cases, you can attach a ref to the DOM node and avoid using findDOMNode at all.

source: https://facebook.github.io/react/docs/react-dom.html#finddomnode

When using ref, prefer ref callback over the older (yet supported) string variation:

| If you are currently using this.refs.myRefName to access refs, we recommend using this pattern instead.

source: https://facebook.github.io/react/docs/refs-and-the-dom.html

Key is key

Key is super important with repeated elements because it's Reacts way of telling if its the same element or not. If an item in a loop has the same key on the next cycle, react won't attempt to unmount the old and mount a new, instead it will just update its props. This is really important for animations because you don't want the next cycle to remove an element that is currently animating.

ReactTransitionGroup

Also very important when items are being added or removed to the DOM. By wrapping your element in ReactTransitionGroup, you can delay when an element is actually unmounted - meaning you can hold off until an animation is finished before an element is removed from the vdom.

gsap is no different from all the other non-React-aware libraries out there. TinyMCE, Google Maps, etc can all work with React despite having very complex architecture. Before you scream - "but there is 'react-google-maps' and 'react-tinymce' on npm!" They are quite simple wrappers that, like above, utitilise the lifecycle methods and refs to tap into the dom while staying react.

Happy to throw some codepens together if needed.

*Edit*

Super simple example, can provide more:

See the Pen qqWJzv?editors=0010 by cjke (@cjke) on CodePen

Things to note is that the overall state is kept declarative (as per Reacts liking). The component is given props about its current state (is it animating, etc) and a child component communicates its internal state outwards via callbacks (again this is standard React - think like a normal input component, pass value={value} in and onChange callback).

During the timeline animation, the state is maintained (the counter - ironically this is set is via gsap, but the counter state count could be from clicks or anything).

December 1, 2015

http://blogs.adobe.com/flashpro/welcome-adobe-animate-cc-a-new-era-for-flash-professional/

and..

As of November 2015, Edge Animate is no longer being actively developed.

http://www.adobe.com/be_en/products/edge-animate.html

- alwayz

October 8, 2015

wow, i think i its safe to safe the animation capabilities of greensockjs are moving at an accelerated pace! its

starting to remind me of flash as years ago. Congrats guys. and in regards to the guy "went to another open source library author, insulted our work and asked them to copy what we're doing (but in the "right" way)."

I guess you know you you are doing the right not just when you have a lot of fans but when you have a lot of attention from critics. wow, lol.

September 11, 2015

that cool brackets has that feature to preview instantly....for those whouse sublime txt with live reload installed...to achieve something similiar so that it updates on save... if i really wanted instantaneous feedback, its possible to save sublime every millisecond or on keystroke. then livereload would update...

September 3, 2015

right next to 0,

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by dneckles