Jump to content
Search Community

ericshew

Members

  • Posts

    55

  • Joined

  • Last visited

 Content Type 

Posts posted by ericshew

    making a child div animate to fill the entire scree

    in GSAP

    Posted

    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.

    making a child div animate to fill the entire scree

    in GSAP

    Posted

    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.

    making a child div animate to fill the entire scree

    in GSAP

    Posted

    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.

    See the Pen BaoLwQY?editors=1111 by ericshew (@ericshew) on CodePen

    gsap 3 upgrade issues

    in GSAP

    Posted

    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. 

    gsap 3 upgrade issues

    in GSAP

    Posted

    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
    1. {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);

     

    creating and maintaining an animation queue

    in GSAP

    Posted

    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! 

    See the Pen mdbxgRW by ericshew (@ericshew) on CodePen

    animated text challenge

    in GSAP

    Posted

    11 hours ago, Sahil said:

    Here is what you want. In this particular case you can just make overflow hidden on h1 tags. Another way would be to use opacity 0 but it won't have that clipping effect. Otherwise wrapper is necessary.

     

    In your HTML you are using some weird spaces around id, kind of unnecessary.  Also, not complaining but on codepen you have one cool feature to use, personally I love using it because it makes your code really readable. TidyJS, TidyCSS, TidyHTML under each panel, just try using it sometime you will love it too.

     

    See the Pen RxMxQj?editors=1010 by Sahil89 (@Sahil89) on CodePen

     

     

    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! 

     

    • Like 2

    animated text challenge

    in GSAP

    Posted

    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. 

    animated text challenge

    in GSAP

    Posted

    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. 

     

    See the Pen LedOpa by ericshew (@ericshew) on CodePen

    convergence / divergence of svg elements

    in GSAP

    Posted

    10 hours ago, OSUblake said:

     

     

    I used to animate position based attributes, like x/y on rects and cx/cy on circles, but then I started noticing problems if you also animate other transforms on the same element. I haven't brought the issue up with @GreenSock before, but I'm guessing it's causing problems with the way GSAP calculates origins. It all depends on the order and when they are applied, but changing a position/size based attribute causes the bounding box to change, which GSAP might not be aware of.

     

    So it might be better to use getBBox, and animating transform based x/y just to be safe. Another reason is that there can be a performance advantage in certain browsers when animating a transform over an attribute.

     

     

     

    For what you're doing, you don't need to set an origin. svgOrigin is just like transformOrigin. It's defines the point/anchor that an element will scale from and rotate around. It has nothing to do with translation, i.e. animating x and y. The difference between the two is where the origin is relative to. For svgOrigin, it's relative to the svg element, and for transformOrigin, it's relative to the element. 

     

    This is a very simple problem. All you have to do is get the center of 2 bounding boxes, and then subtract the difference. 

     

    See the Pen baRZjN by osublake (@osublake) on CodePen

     

     

     

     

     

     

    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! 

    • Like 2

    convergence / divergence of svg elements

    in GSAP

    Posted

    18 hours ago, PointC said:

    Wow. This is really helpful. What an elegant solution. Thanks very much. 

    18 hours ago, PointC said:

    Hi @ericshew :)

     

    I think the easiest approach would be to use the x/y attributes. Here's a fork of your pen with that possibility.

     

    See the Pen goRqBz by PointC (@PointC) on CodePen

     

    That works well for circles(cx/cy) and rectangles, but you can also get the BBox of paths and loop through for those as well. We had a similar question here:

     

    Here's the demo I made as an answer to that question.

     

    See the Pen RLgLPy by PointC (@PointC) on CodePen

     

    Hopefully that all helps. Happy tweening.

    :)

     

     

    18 hours ago, PointC said:

    Hi @ericshew :)

     

    I think the easiest approach would be to use the x/y attributes. Here's a fork of your pen with that possibility.

     

    See the Pen goRqBz by PointC (@PointC) on CodePen

     

    That works well for circles(cx/cy) and rectangles, but you can also get the BBox of paths and loop through for those as well. We had a similar question here:

    9 hours ago, OSUblake said:

    @PointC link about animating an explosion from the center made me remember showing how to do something similar. You can create some pretty interesting effects with very little code.

     

     

     

    See the Pen wzkrBr by osublake (@osublake) on CodePen

     

     

    Here's the demo I made as an answer to that question.

     

    See the Pen RLgLPy by PointC (@PointC) on CodePen

     

    Hopefully that all helps. Happy tweening.

    :)

     

     

    convergence / divergence of svg elements

    in GSAP

    Posted

    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. 

    See the Pen OzgdJj by ericshew (@ericshew) on CodePen

    morph responding to hover

    in GSAP

    Posted

    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!  

    See the Pen mprRPR by ericshew (@ericshew) on CodePen

    splittext timing issue

    in GSAP

    Posted

    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! 

     

    See the Pen ?editors=1111 by ericshew (@ericshew) on CodePen

    splittext revert is erasing spans that were there before

    in GSAP

    Posted

    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! 

1
2
3
Page 1 of 3  
×
×
  • Create New...