Sgt. Red Pepper

I was over thinking this and just realized I can use the set method to rotate the path, but I'm still curious if there is rotation functionality in the helper tool for quick fine tuning.

I'm trying to animate a target along an svg circle tag. Is there anyway to easily rotate a path with the MotionPathHelper plugin? When I use the MotionPathPlugin convertToPath method with the circle tag, the start point of the new path is set to 3 o'clock. This forces the target to jump from its initial position. I was hoping to rotate the path and position the start point as close as possible to the target's original position and copy the path info. Any insight appreciated.

Thanks for the help! Combined with a debouncer, this is exactly what I need. Just to clarify, this isn't a concern when animating percentages, such as 0% height to 100% height? The pixel value of an auto height is recorded for fast interpolation whereas a percentage based animations interpolate between the percentage values?

Hello, after searching the forums I was unable to find any information about an issue I am experiencing by animating to height auto while using a grid display. In this scenario, the grid has a breakpoint that will render its contents in either one or two columns, depending on the viewport width. On initial load, the animation works fine, but when the breakpoint is crossed, the animation only recognizes the initial height when it animates to auto. This causes an unattractive jump to the correct size when the animation completes. Is there any way to force the timeline to refresh itself if the breakpoint gets crossed? I have provided a codepen link with a crude example of this issue. I would greatly appreciate any guidance that you could provide me with. Thanks.

@GreenSock I managed to get a screen recording of the flicker issue Carousel_Flicker_Issue.mov

This doesn't make a difference, I still see the issue even when hardcoding a height

Thanks for the suggestion, gave it a try, but the issue persists.

Cleared cache and hard reload, I'm still seeing the occasional flicker/stutters to the animation. Is it bad practice to adjust display properties with a set method within timelines? I want to avoid absolute positioning as there is additional content along with the message in the real life example.

Thanks for the reply. I had discovered this earlier, but I'm not sure this approach will work in my case since I am using the set method in my timeline.

Thanks for the response, but this did not make a difference.

I still see the flickering with the next release preview

Hello, I have been working on an animated, looping banner text carousel, and I have provided a slightly simplified code pen example. The animation seems to work smoothly, but is interrupted every so often by an inexplicable flicker. You may need to watch the loop quite a few times before this flickering occurs for you. I want to maintain document flow for my purposes so I'm adjusting the text display settings as part of the animation. I have a hunch that this might have something to do with the issue. I was hoping someone would be able to take a look at my animation and be able to help me resolve this. Thanks in advance.

@GreenSock I responded to the other thread as well, but thank you again! I really appreciate the follow up, excellent solution.

@GreenSock Thank you! I really appreciate the response. This is a great solution.

Hello, I am assessing a few strategies for implementing parallax effects and came across the GSAP ScrollTrigger examples. The simple parallax sections examples works nicely when the sections occupy 100vh, but I run into issues when making the sections smaller. In the codepen example, the sections are set to occupy 60vh and they look fine in a wide view, but when the window is as narrow as possible, white spaces appear within the sections, ruining the effect. It is my understanding that the narrow viewport issue occurs because the background image dimensions are similar to the section dimensions, and so there is no natural overflow from background-size: cover. Has anyone experienced and overcome this issue before? Other strategies I've tried: 1) background-attachment: fixed, this is the most simple approach 2) setting background-size to 'auto 140%' (any second value greater than 100%), and then animating fromTo backgroundPosition: '50% 100%' => backgroundPosition: '50% 0%'. This works well in most cases but, the width will be restricted on larger viewports. I think the gsap examples look the most elegant, but I am struggling to overcome the white space issue and am hoping someone may be able to provide some guidance. Thank you in advance for any help.