Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 11/10/2018 in all areas

  1. Animating to a smaller image height is causing the modal to recenter, moving the image's position down. You could add an another element to maintain the height so it won't shrink. Another option is to clone the image, and animate the clone instead.
    3 points
  2. Your gradient goes from top-left corner to bottom right, you need to position it based on your arc. Best way to see your gradient would be use rect and fill it with gradient so you can see which areas gradient is affecting. Here is fork but there are many other issues with your demo like blur is affecting gradient color, and top left part is not getting drawn(or your are drawing rect on top of that) so I am not sure what is going on. Also, please keep your questions related to GSAP API only we don't provide support for general javascript related questions and it seems you are not even using GSAP. https://codepen.io/Sahil89/pen/MzeZXj
    3 points
  3. All three add statements execute at the same time and they calculate the duration based on current position of the element, so 3rd statement goes to 50 pixels in 0.5 seconds but by the time that tween executes distance has changed. Though what you are expecting is that it should calculate duration after first two tweens complete. If you want to construct timelines like that, maybe you can use addPause method and move your logic inside it. https://greensock.com/docs/TimelineLite/addPause()
    2 points
  4. Habit mostly. It's also faster. And with FLIP animations, sometimes I don't want my props to permanently removed. If an animation is interrupted, getBoundingClientRect() can give you unexpected results because it takes transforms into account. Coordinates can be confusing. From this post. https://greensock.com/forums/topic/17406-is-there-a-default-x-y-of-element/?tab=comments#comment-78419 Sometimes I need to temporarily clear the cssText in order to do some calculation. // save and clear cssText var cssText = myElement.style.cssText; myElement.style.cssText = ""; // some calculation // put cssText back myElement.style.cssText = cssText; And sometimes I need to get a transform value inside a calculation. clearProps will remove the _gsTransform object from the element, which could throw an error if you're not careful. // Error TweenLite.to(element, 1, { x: 100, clearProps: "all", onComplete: function() { console.log(element._gsTransform.x); } }); // All Good ? TweenLite.to(element, 1, { x: 100, onComplete: function() { element.style.cssText = ""; console.log(element._gsTransform.x); } });
    2 points
  5. Does this help?: Basically I made a function for you: function scrubTimeline(tl, from, to, wrap) { if (wrap) { //tween "from" to the end, then jump to the beginning and tween to the "to" position return new TimelineLite().add(tl.tweenFromTo(from, tl.duration())).add(tl.tweenFromTo(0, to, {immediateRender:false})); } return tl.tweenFromTo(from, to); } By the way, are you aware of DirectionalRotationPlugin? Might be helpful. You may not need to use complicated timeline setups. Another idea is to use ModifiersPlugin and just tween a value that you plug into the progress or time value on the timeline, but you can allow it to go past adjust it on-the-fly. Like, if you tween from a time of 10 to 20 on a timeline that's only 15 seconds long, you'd take the variable and do % 15 on it so that it just wraps very simply. You could do that with an onUpdate as well. There are many was to accomplish it actually - I don't want to overwhelm you I figured the function above is probably the most intuitive for most people. Happy tweening!
    2 points
  6. Your DOM code is pretty verbose, so I made another version with lit-html. I didn't do a reverse a animation, but you could do it the just like the open animation. You don't have to reuse or reverse the same timeline.
    2 points
  7. I think @Carl did a good job pointing out the main issues you are having. It looks like you are trying to do a FLIP animation. This is a good place to start.
    2 points
  8. Problem: When you create any timeline, all the statements execute at the same time. So GSAP creates tween with target and duration, in your case duration is important but it gets calculated for all three tweens based on target element's current position. So when 3rd tween is created element is at position 0 and it goes distance of 50 pixels which is absolute value. But because it is a 'to' tween, the element goes from whatever the current position is to the target position and by the time 3rd tween plays, distance has changed but because it was created already, the duration for it was set to 0.5. Solution: You need some way to calculate duration based on actual position, to get around that you need to use addPause method. When you call addPause during a timeline, it will pause timeline at given position parameter. I am passing the function that will get called when timeline pauses, parameters that we pass to move function and scope. I am passing current timeline as scope to keep things organized. Inside the move function, you do same calculations as before but this function gets called while timeline is playing. Because of that the tween gets created based on what is actual position of the element, so your calculation for duration is live and correct. Once your tween/timeline completes inside the addPause function, we can resume the main timeline by using onComplete callback. If you know all target positions then another solution would be to calculate your duration based on target value of previous tween instead of getting current position of the element. Because I think original question was for scenario where target position would change based on user interaction.
    1 point
  9. Are you using a HiDPI monitor, like retina, 4k, 5k. Those can kill performance, particularly with something that is costly to render like a drop shadow.
    1 point
  10. I'm pretty sure getBoundingClientRect works in all cases. The circle looks weird because it doesn't have corners, but it's correct.
    1 point
  11. Are you asking how to move your element to the start of a path? If so, you're looking at the answer. A motion path is an array of points, with the first item being the start position. var start = motionPath[0]; TweenLite.set("#markerStart", { x: start.x, y: start.y });
    1 point
  12. Didn't we just cover this in your other thread?
    1 point
  13. given this gradient <linearGradient id="MyGradient"> <stop offset="1.281415e-03" stop-color="#FFDD15" id="stop1"/> <stop offset="0.5" stop-color="#EE4036" id="stop2"/> <stop offset="1" stop-color="#9E1F63" id="stop3"/> </linearGradient> you can tween those attributes using the attr plugin TweenMax.to("#stop1", 2, {attr:{"stop-color":"red"}}); TweenMax.to("#stop2", 2, {attr:{"stop-color":"white"}}); TweenMax.to("#stop3", 2, {attr:{"stop-color":"blue"}}); we warn not to tween stuff in <defs> so its worth testing. In the future please consider providing a demo as it makes things easier to test.
    1 point
  14. One of the coolest things about Animate is using any font you want, and Animate converting it to shapes in the published js file. You have fewer server requests, and no need to make multiple png images or SVGs of your copy. Except, when you paste vector art such as a lockup from Illustrator. Then your js file calls that font. Unfortunately we are not set up to do any QA, so I am unable to report, exactly what happens when the font being called is for example Impact, and the user does not have it. The only fubar situation i was made aware of by a marketing person seeing one of my Animate published ads in the wild, where I had pasted from In Design, to Illustrator to Animate, was the mobile size where it appeared to revert to Times. Any one else noticed this? My experience was that if I had pasted something that contains text from Illustrator I see a line like this this.text = new cjs.Text("", "60px 'HelveticaNeueLTStd-Hv'", "#FFFFFF"); If I created all text in Animate, I have no instances of this.text = new cjs.Text
    1 point
  15. I just quickly looked at your code, but that's probably the problem. You're calculating the position at the very start for all the walk calls. By referencing a function without parentheses, it will be called later. // called immediately .add(walk(1.1), "-=0.5") // called later .call(walk, [1.1], null, "-=0.5")
    1 point
  16. I don't see how you can morph shape A into shape B and keep the original shape A on screen without duplicating that path data in the SVG as Blake illustrated. Perhaps you can better explain what you would like to have happen or how GSAP would do this for you. Something to note that is semi-related and not a solution to your problem is that GSAP puts a "data-original" attribute on the target of your morph so that you can easily morph back to the original shape. the data-original attribute stores the original, pre-morph, path data var tl = new TimelineLite({onUpdate:updateSlider}), circle = document.getElementById("circle"); tl.to(circle, 1, {morphSVG:"#elephant"}) .to(circle, 2, {morphSVG:"#circle"}, "+=1")
    1 point
  17. First, one of GSAP's most important features is its ability to help people create animations that tell stories. Your work certainly excels at that. Great job! The reason EGON moves so fast at the end is that he is moving a great distance in a short amount of time I know you know that, but now we have to consider why is the time so short and not longer for the big distance he has to travel. I have to admit I'm having trouble deciphering the walk() function. I see it takes a target parameter, in GSAP the target is the thing that is being animated, but it looks like you are passing in numbers like walk(0.1) walk(0.001) walk(0.25) its ok, to use your own target variable and be number... I just don't know what those numbers represent. I also noticed that you are getting the start value by doing start = egon.offset().left; console.log("start = " + start) If you log it out start you will see that it is always the same. In order to get the distance and speed I think you need to know egon's current position and where he is going to when those tweens are created. I think it will take a bit of tinkering, so hopefully this helps you or someone else get into the proper solution. Again, great job on the animation!
    1 point
  18. I wasn't thinking about an eye when I posted my response. Resizing the movement vector if it exceeds a certain radius is one way you could correctly handle diagonal cases.
    1 point
  19. Ya there is a lot of code that I am not even sure what is the purpose of that. You are using container's height and width to calculate progress of tweens based on where the cursor is inside the container. Now your container can be a div or window and you need to know how using either affects the implementation. First thing you need is to position your elements where you want them when mouse is at center and from that position eye will translate. You can't use pageX in your actual project because if you scroll it will throw off your calculations. You need to calculate mouse position like I did if your page scrolls. You also need to reset value of rect on resize and scroll event. Figuring out how much the eye should move doesn't need all that calculation, you can just use a number based on radius of your circles.
    1 point
  20. Ya I am in same boat. Why would you bother with with recording time etc? Unless I am missing something, you are taking really wrong route to achieve this. And if you really want to use something like setTimeout then you can instead use delayedCall and update it on mousedown.
    1 point
×
×
  • Create New...