fcdobbs

Thanks. I think I figured it out. I used strokeWidth on an element with no stroke as an ersatz y coordinate. Now the motionPath on scale and the motionPath on x appear to have the same inflection points and rates of change. I’d be curious if there’s an easier way to fake 3D motion on a nested SVG element. Thanks again for all of your help! https://codepen.io/fcdobbs/pen/PodzQey?editors=0010

Thanks! I'll put together a simple example. Does this method or do any of the other helper methods convert a cubic bezier array of points to the M ... C format used in the SVG path d attribute? pointsToSegment

Thanks. I’d like to apply a scale transformation and x and y offsets that vary depending on an element’s position in a motionPath timeline. Can an element have two motionPath tweens with identical start times, durations, and eases, so that the animations overlap? If not, I believe I can to apply a motionPath tween to a parent svg g or div. Can I replace x and y with an array other element properties in the cubic bezier coordinate format with anchor, two control points, anchor, two control points, etc. in a motionPath attached to a tween with identical duration, ease and start time and end up with contemporaneous transformations of those properties to either the same or a parent element? I tried a couple of versions of replacing x: with scale: in the array of coordinates in the Vine with random leaves example. I thought maybe if I replaced x: with scale and y: with a property that doesn’t exist, GSAP would use the scale values with the same inflection points and rates of change as the x value in the original motionPath. https://codepen.io/fcdobbs/pen/xxaVVzP The scale transformations don’t appear to overlap with the stem curve, but maybe I made a different mistake. Thanks again.

Thanks! With a recursive call to the function, I was able to get the vineTL to rebuild itself from scratch without repeatRefresh. Based on reviewing the forums, it looks like animating the points on a motionPath after it’s assigned to a timeline isn’t possible in GSAP. Is it possible to define a property function in a tween that uses a value from a motionPath applied to a generic object in a different timeline based on position? I thought I had figured out a syntax that would link the scale property to the x value of a second timeline with a motionPath based on position: scaleX: () => {motionPath2.progress(vineTL.progress()); return p2.x}, https://codepen.io/fcdobbs/pen/wvEMyEB It looks like the tween is animating between two static values. Or is there a way to assign a Bezier curve to a formula without using motionPath and retrieving, for example the x for a given y or vice versa? Thanks again for all of your help.

Thanks. First I'd like to learn how to refresh the stem in the example above with new coordinates on repeat , and then I'd like to learn how to animate the stem. My thought was that the most efficient way to build the stem again with new coordinates would be through a callback function that builds the stem from scratch and is executed at the start each time it's played, including the initial run and all subsequent runs. There's something I don't understand about callback functions and repeatRefresh. When I add a simple timeline through an onStart callback with repeatRefresh set to true, I get an infinite loop. Also, every time the callback executes the .iteration() logs as 1. What's the best structure for putting a timeline on repeat and building it from scratch every time without getting stuck in an infinite loop? In this pen repeatRefresh is set to "false" initially. Thanks for your help. https://codepen.io/fcdobbs/pen/WNgvGXe

Thanks. Is it possible in GSAP to select each of the five coordinates that define the svg path in the createStem function and tween them to new values?

It works! Thanks. I have some related questions about performance with repeatRefresh. My functions calculating the tween properties will be longer than in this example. Is there any reason making the calculations outside of the tween, feeding them into an array, and having the tween pick a value either randomly or by remainder of the repeat iteration would be less resource intensive than repeatRefresh with functions? Would the answer depend solely on how many times the property values are calculated, so that any unused values populating the array when the animation is terminated represent wasted resources? Also, if I find six variations is sufficient, would it be less resource intensive to generate a timeline with all six variations and repeat the 6x longer timeline? Thanks again. This example has several features I can use.

Thanks. There's still something I don't understand about repeatRefresh. I updated the syntax to the function syntax above, but scaleX, scaleY, rotation are not refreshing on repeat of the vineTL timeline. I also removed the redundant set transformOrigin: https://codepen.io/fcdobbs/pen/ZEMEJzp Is there something else about the way the vineTL timeline is built that makes repeat work, but not repeatRefresh? Thanks for your help.

Thanks. It makes sense to me that the position values are set, and the scales are set to zero once on the global timeline. I'm confused as to why the functions that are included in the tweens that make up the vineTL aren't executed on repeat. I would expect the position to be set on the first iteration, and the tweens to have different "to" values for scaleX, scaleY, and rotation on repeats with repeatRefresh set to "true". vineTL.to(leaf, {duration:2, //make some leaves point left, some right (randomly) scaleX: (Math.random() < 0.5 ? getRandomInRange(1, 1.5, 2) : getRandomInRange(-1, -1.5, 2)), scaleY: getRandomInRange(1, 1.5, 2), rotation: getRandomInRange(-20, 20, 0), ease: Circ.easeOut}, //don't start it until the vine gets to this point duration * progress); I'm not sure what breaks the parent-child relationship between the vineTL timeline and all of the "to" tweens on the leaf objects that are on the vineTL timeline. I'm also wondering if transformOrigin affects the position of the d attribute in the createLeaf function: gsap.set(leaf, {attr:{"d": leafPath}, transformOrigin: "left center"}); The transformOrigin is set a second time for each leaf at 0 on the global timeline, so it's unclear to me if the first transformOrigin is required for the d attribute, or if it's redundant: gsap.set(leaf, {x:p.x + svgWidth/2, y:p.y - leaf.getBBox().height / 2, scaleX: 0, scaleY: 0, rotation: getRandomInRange(-15, 15, 0), transformOrigin:"0% 50%"}); There are several features of this pen that could be useful to me. Thanks again.

Thanks. I'll replace the getRandomInRange function in this pen with random(). Any idea why repeatRefresh doesn't cause the getRandomInRange function to run again on repeat for the leaf parameters that are set with this function in the vineTL? It looks like setting the stem values aren't part of the timeline that repeats. I expected all of the functions in the vineTL to run again on repeat.

Super. Thanks! Changing the BezierPlugin parameter 'value', to the motionPath parameter 'path' got the pen drawing. Any idea how to set it to run the getRandomInRange function on child tweens on repeat? I tried adding repeatRefresh: true, but it draws the same stem and same leaves on repeat: //vineTL = gsap.timeline({paused: true, delay: 1, repeat: -1, repeatDelay: 3, yoyo:true}); vineTL = gsap.timeline({paused: true, delay: 1, repeat: -1, repeatDelay: 3, yoyo:true, repeatRefresh: true}); Thanks again.

Hi, I'm attempted to convert the Vine with random leaves codepen to GSAP 3. My guess is there is something about the conversion from the BezierPlugin to the MotionPathPlugin that I don't understand. https://codepen.io/GreenSock/pen/XPgqVv/121dd702a2983bc308a573bca6b072e4 I tried replacing bezier with MotionPath and updating the TweenMax/gsap and TimelineMax/gsap syntax: https://codepen.io/fcdobbs/pen/rNZBegV?editors=1111 Any help in understanding the difference between bezier and MotionPath and migrating this pen to GSAP 3 would be appreciated. Thanks!

Thanks. I think I figured out how to position and scale a nested dynamically added SVG with a viewBox. The x, y, width and height to parameters have to be set inside attr:{} for the SVG with the viewBox property. If applied outside of the attr:{} they have no effect. Also if they are applied either inside or outside of attr:{} of a parent <g>, they have no effect. If the nested dynamically added SVG has no viewBox the parameters can be either inside or outside attr:{}.

Thanks. What is a good way to figure out if my design is too taxing, in particular for a mobile device? Are there any rules of thumb of which I should be aware in terms of how many times I can use SVGMorph or SVGDraw, for example, before I start to run into performance issues? Also, for this wavey banner, would my time be better served learning Pixi.js or perhaps trying to increase the resolution in my original design by shrinking the div size and spacing out the letter placement among the div's? Thanks again.

Thanks. I’d like to be able to scale and position dynamically created, nested SVG’s that were created on different scales in Illustrator. I expected that if I use the viewBox exported from Illustrator and apply x, y, and width values to the SVG on the scale of the parent viewBox that the artwork would be scaled and positioned according the parent viewBox. Maybe this codepen will make it easier to follow. These three tests use the same x and y coordinates and the same width. The middle test that has no viewBox is the pattern I expected, but it’s also not complex art created in Illustrator. The top and bottom tests have SVG’s with their own viewBoxes. I tried adding the x, y and width to the g element in one and to the nested SVG itself in the other. I’d like to understand how these x, y and width values are being interpreted. I’d also like to figure out how to get the SVG’s with their own viewBox’s to scale and position relative to the parent SVG’s viewBox, in this case with the nested SVG width 10% of the parent height and with the first element positioned at 50% of the parent height. Thanks again! https://codepen.io/fcdobbs/pen/oNMRjgQ?editors=0011

Thanks. The thread referenced above seems to conclude that SVG displacement map filters weren't widely supported in 2015. This would be for a consumer facing web page. Is there a good way to estimate what the reach among consumers is today for SVG displacement map filters? Thanks again.

Hi, I’m attempting to dynamically add multiple instances of an SVG within a larger framing SVG. I thought if I gave each dynamically created instance its own viewBox that I would be able to define the width, height, x, y, and z values with the units of the containing SVG’s viewBox. I’ve also tried putting each instance in an SVG group and defining the width, height, x, y, and z values for the group, but these values appear to be overridden or ignored. The instance appears to be centered and maximized withing the containing SVG's viewBox. Ultimately, I’d like to add perspective and populate this scene with clusters of these flowers receding into the distance using GSAP animation. Some of these nested functions can likely be consolidated in the final version. My first idea was to put all of the elements and attributes in multidimensional arrays, but I later decided that navigating the arrays was creating additional iterations, so I’m explicitly defining the attributes and parent element for each SVG element before calling a function to add the element. There’s probably something simple I’m missing about how units are calculated in nested viewBoxes. Thanks for your help!

Thanks. In order to create the wavy banner effect with MorphSVG, would I have to apply the sine wave distortions to the y value and the background color in Illustrator? Is there a way to apply a sine ease to the morph of coordinates and/or colors within the MorphSVG plugin? Or perhaps add anchor points to a rectangle that can be animated in GSAP? Thanks again.

Hi, I’m attempting to create a wavy banner, similar to a banner towed behind an airplane. I’d be curious if anyone has ideas about how to smooth out the edges of the tiles in this example. Or if there’s a way to accomplish this that would look more like the text block is on a wavy surface. This version is based on the discussion from this post: https://greensock.com/forums/topic/18535-wave-banner-animation-background/ Thanks!

Thanks. Yes, for this page on mouseenter for #1, #2, or #4, that button animates and #3 reverses. On mouseleave these animations are reversed. On click the user navigates to a different page with the menu item for that page highlighted. Any examples using an active variable would be appreciated. Thanks again.

Thanks. Here's a revised codepen based on the CSS variables example with the 3rd menu item highlighted initially. https://codepen.io/ripmurdock/pen/dydeyrj I was planning on having one of the menu items already highlighted on page load. On mouseenter, I'd like to turn on the highlight (--scaleY, color update) for the current item and turn off the highlight for all other menu items. I'd like to reverse those changes on mouseleave. I'm guessing it would be most efficient to add the animation for the values of all the other (not current) menu items to "tween". Is there any way to select all of the menu items, excluding the current item in ".menu_1 ul li a"? Or should I iterate through the array of ".menu_1 ul li a"s and check each for whether they are equal to the current item? Thanks for your help.

In the CSS variables example above, I'd like to also set "--scaleY": 0 for the sibling "a"s on mouse enter. How can I select the sibling "a"s, excluding the "a" with the mouseenter event, in order to set their CSS variables? Thanks for your help.

Thanks. Animating the variable value in the pseudo element fixed my issue.

Hi, I'm attempting place a CSS hover effect inside a longer GSAP sequence. Is it possible with GSAP to animate the CSS property of a particular element's ::after psuedo element? In the example below the scaleY property is animated for all menu items. I'd like to set the scaleY property for the particular menu item with the hover event and to separately set the ::after scaleY property for that element's sibling elements. Or is there an alternate way of animating a background that is contiguous with each menu item? Thanks! https://codepen.io/ripmurdock/pen/bGLvBWM?editors=0010