ericshew

It does. Thanks. I was just seeing it the wrong way. I appreciate your help!

Actually, I have upgraded to GSAP 3 but the codepen I'm using seems to be using GSAP 2. I'm still unclear what the second parameter is. I'm quoting your line below that confuses me and I haven't seen this pattern in the documentation. Does this mean that the attributes from the second parameter are copied to the first? I'm just trying to figure out what this line does. Thanks in advance. The second parameter is the vars, which in this case is from which is a reference to an object.

Again, thanks for sending me this. I have one last question. On this codepen, there's a line: TweenLite.set(clone, from); I'm looking in the documentation for gsap 2 and can't find anything about a set command without a parameter. Can you let me know what this line does? Thanks in advance.

Thanks for this. I appreciate it. This is a complicated solution and I've learned a lot from it.

Hi there, I'm running into a challenge with animating a div scale up to fill the entire window. The initial placement of the child div will vary and is based on the size of a parent. The problem I'm running into is that the placement of the expanded child is based on the parent. Is it possible to smoothly expand without being bound in this way? Thank in advance for your help.

Okay. Thanks for the information. I missed some of the resources you guys pointed out on my initial review. I appreciate your help.

I'm getting errors throughout my entire site. I'm not sure how I would replicate the issues in codepen. Are there resources available that identify the issues (like cycle) or that provide insight into resolving them? Lastly, is GSAP 2 online documentation available? It would be really nice to have access to it since it may be some time before I can transition to 3.

Hi there, Thanks again to the greensock team for an outstanding product. I'm upgrading to gsap 3 and am running into a few issues. On the previous version of GSAP, these issues did not happen. I believe I added all of the plugins I was using before but I'm not sure about css rule plugin. Please let me know your thoughts on resolving? Thank you. gsap.min.js:10 Invalid opacity tween of 0 Missing plugin? gsap.registerPlugin() gsap.min.js:10 Invalid cycle tween of {y: Array(2), x: Array(2), opacity: Array(2), ease: Array(2)} Missing plugin? gsap.registerPlugin() gsap.min.js:10 Invalid x tween of 500 Missing plugin? gsap.registerPlugin() gsap.min.js:10 Invalid opacity tween of 0 Missing plugin? gsap.registerPlugin() gsap.min.js:10 Invalid opacity tween of 0 Missing plugin? gsap.registerPlugin() gsap.min.js:10 Invalid x tween of -400 Missing plugin? gsap.registerPlugin() gsap.min.js:10 Invalid opacity tween of 0 Missing plugin? gsap.registerPlugin() gsap.min.js:10 Invalid x tween of -400 Missing plugin? gsap.registerPlugin() I'm also getting this error: Uncaught TypeError: Cannot read property 'height' of undefined Here are the plugins I was using now. wp_enqueue_script( 'GsapCore' , get_stylesheet_directory_uri() . '/js/greensock/gsap.min.js', array ( 'jquery' ), null, true); wp_enqueue_script( 'DrawSVG' , get_stylesheet_directory_uri() . '/js/greensock/DrawSVGPlugin.min.js', array ( 'jquery' ), null, true); wp_enqueue_script( 'Splittext' , get_stylesheet_directory_uri() . '/js/greensock/SplitText.min.js', array ( 'jquery' ), null, true); wp_enqueue_script( 'MorphSVG' , get_stylesheet_directory_uri() . '/js/greensock/MorphSVGPlugin.min.js', array ( 'jquery' ), null, true); wp_enqueue_script( 'CSSPlugin' , get_stylesheet_directory_uri() . '/js/greensock/CSSRulePlugin.min.js', array ( 'jquery' ), null, true); wp_enqueue_script( 'TextPlugin' , get_stylesheet_directory_uri() . '/js/greensock/TextPlugin.min.js', array ( 'jquery' ), null, true); wp_enqueue_script( 'customease' , get_stylesheet_directory_uri() . '/js/greensock/CustomEase.min.js', array ( 'jquery' ), null, true); These were the plugins I was using prior to the upgrade. wp_enqueue_script( 'TweenMax' , get_stylesheet_directory_uri() . '/js/greensock/TweenMax.min.js', array ( 'jquery' ), null, true); wp_enqueue_script( 'DrawSVG' , get_stylesheet_directory_uri() . '/js/greensock/plugins/DrawSVGPlugin.min.js', array ( 'jquery' ), null, true); wp_enqueue_script( 'Splittext' , get_stylesheet_directory_uri() . '/js/greensock/utils/SplitText.min.js', array ( 'jquery' ), null, true); wp_enqueue_script( 'MorphSVG' , get_stylesheet_directory_uri() . '/js/greensock/plugins/MorphSVGPlugin.min.js', array ( 'jquery' ), null, true); wp_enqueue_script( 'CSSPlugin' , get_stylesheet_directory_uri() . '/js/greensock/plugins/CSSPlugin.min.js', array ( 'jquery' ), null, true); wp_enqueue_script( 'TextPlugin' , get_stylesheet_directory_uri() . '/js/greensock/plugins/TextPlugin.min.js', array ( 'jquery' ), null, true); wp_enqueue_script( 'customease' , get_stylesheet_directory_uri() . '/js/greensock/easing/CustomEase.min.js', array ( 'jquery' ), null, true);

Hello, I'm trying to solve a problem that I've wondered about for a while. What I would like to do is have a framework where elements animate in when they enter the viewport. However, if the screen shows three at once, then I would like them to animate in consecutively. Because of different size screens, scroll speeds, etc., the exact number of elements could vary. To me, a good way of solving this would be to add the entrance animation to a timeline that acts as a queue and then once the timeline completes to empty out the queue. I've tried implementing this but I can't get the results to work. Could you let me know your thoughts. Thanks very much in advance!

Thanks Sahil. Even though the code didn't achieve the intended effect I still learned a few pointers from it. The code cleanup frunction was new to me as well. Thanks very much for sharing!

Thanks for letting me know. I really appreciate it!

I'm referring to the non morphing text... in my codepen I created two examples. One with a div and one without. I'm hoping for a soution that doesn't require an outside DIV or other dom manipulation. It sounds like that isn't possible.

It's not the initial text I'm referring to, it's the body copy and title linked wtih the portfolio - which is all live text.

Hi there, I'm trying to use greensock to recreate an effect I see everywhere. Here is an example of it. http://www.jennyjohannesson.com/klm I'm referring to how the Bluey text and body appears on the portfolio page. I would like to have the text appear from the baseline. I can re-create this effect using a wrapper with visible set to off but ideally I would not use a wrapper. It seems like there should be a straightforward way of pulling this off but I'm not sure how to do it. Thanks in advance for your help.

Wow. Thanks very much. I've gone over your solution multiple times now and I'm finally beginning to understand it. Your code is always so concise and clean. I really appreciate the clarification. Thanks!

Here's the demo I made as an answer to that question. Hopefully that all helps. Happy tweening.

Hi there, I've been figuring out the svgorigin setting and am really happy with how it works. I am running into one problem that I'm not able to resolve. Basically, I'm wanting a whole bunch of SVG rects to converge to / deconverge from a center position. Essentially, it's centering an object according to the SVGorigin. Thank you in advance for your help.

Thanks very much. This is a perfect solution!

Hi there, I'm running into some challenges in using the hover with morphSVG plugin. What I'm trying to do is to have an object morph from shape to shape on the basis of what menu item is currently hovered over. I'm sure I'm overlooking something basic. Thank you in advance for your help. Thanks!

Hi there, I'm in the process of figuring out splittext. I'm trying to build a carousel of text messages that rotate in the manner of an old school odometer. I'm running into issues with when to use splittext. Would welcome your help. With gratitude.

Thank you, Carl. This is tremendously helpful.

Greetings fellow Greensockers, I've been banging my head against this one for a while now. Greensock has been challenging for me! T The problem is that I am using splittext to go throw a series of messages and then I want to highlight a key section out of each one. I am using next / previous buttons to cycle through the various messages. The problem is that if a button is pressed when the cycle is in mid cycle, the results are erratic and janky. I notice that the revert command takes up quite a bit of time. If you rapidfire the button presses you can see how eratic the outcome is. I have tried to use the Isactive command to turn off the timeline if it is midsequence but I have not made it work. I would like help with two things: 1) disabling the previous / next buttons from having an imapct while the timeline is active (bigger priority) 2) put the highlight activation message into the main timeline (instead of calling it in the function that is called when the timeline is over) Here is the same problem in the project I am working on: http://whatcomhope.org/landing-pages/lockbags/ Many thanks!

BTW, I confirmed I am using the latest version of greensock and all of the plugins.

Hi there, I'm using splittext and wanting to animate a passage of text and then to underline a key region within that text. It looks like the split text function deletes the span I had used before because I'm not seeing it within the array of stuff it creates or in the text string that appears once I revert. I can provide a codepen if needed but I just wanted to make sure. Please let me know if I need to. Thanks!

Complicated but I think I get it. Thank you again Sahil!