tjefe

https://codepen.io/tjefe/pen/WNZQwOG Here is an updated one with the animation sort of working on each location, but need to figure out a solution in gsap to make sure the animation runs on each slide, any thoughts? anyone?

For real this time. I have codepen above showing an animation and currently the autoplay(carousel) is disabled, what I am trying to get to happen is once the animation plays it rotates to a new slide and replays the animation. I just need it to replay since all that will change per slide is the background image, front square image and text(swatch). So simply just need it all to repeat and to start over once finishes. Any help/insight? Thanks! EDIT: I am trying to get the js as repeatable as possible since the user can have between two and four slides and I will not know how many they add so I just need a repeated animation between slides however many they add and just to restart until the user leaves this screen.

Trying to get a carousel on the background image to play after all other animations finish, not really sure where to start on getting this to work properly? I have put a note in the codepen to say what to disable to show the full proper animation. Side note I also need to carousel the smaller box that comes from the bottom to another image and the text "Swatch" any thoughts on that? I was trying to just use what bootstrap offered for a carousel but that offered more harm then good it seems for this. Thanks for any insight.

Sorry for the major delay, holidays and all. https://codepen.io/travisboss/pen/YzrzpbV here is a demo of the carousel, what I would like to do is use the carousel js I have already as a timeline option if possible? under `fiftyFiftyCarousel`. Thanks!

Hello everyone, I have an animation that once completes the background image and the foreground image need to change when a user click the carousel number/button, however what seems to happen is the carousel changes but retriggers the entire animation, how can one stop this and just change the images?

Interesting, that does work on safari just fine, I have not altered beyond what you have given and the scss that is offered and html that is shown in that codepen but all I get on safari is just Milliken and the image behind it, it draws Milliken but no zoom.

Thanks again Cassie! One other question I noticed `transformOrigin` does not seem to be supported in safari, been trying to google fu on this but coming up empty handed, do you have any tips to combat the apple? This animation is desktop only so I do not need to worry about any phones here.

Some great people have helped me get this animation going and really appreciate there help. My question now is how do you all account for so many different screen sizes? This animation will be desktop only but that can be from retina down to 768 and we want the same view shown on every size.

`transformOrigin` got me what I needed on sizing, thanks Cassie!

@Cassie @PointC I see now, so this is down the sizing the image behind. The plan was to have the image be responsive until we hit mobile and then no animation at that time. viewBox="0 0 368 95" This is the size of the svg but I need to scale to an entire page, this is probably not a question for greensock forums? https://nextcloud.travisboss.duckdns.org/s/rCrZs28pYybWdDp I put a screenshot in that link of what the final size is which is just basically full width. So it looks like I need to keep the svg small and centered than as it zooms it needs to fill the entire page

Still having my own issues with this, I cannot seem to get any traction on zooming in to the M. Once I use the updated svg it just sort of floats off the page. https://codepen.io/travisboss/pen/zYdRqmy

Thanks this file is from a designer, so I will have to go back to them about this.

Thanks both of you! https://codepen.io/travisboss/pen/zYdRqmy So here is what I have and reading the docs I can only manipulate the stroke not a fill so it looks like the animation would only affect the lines shown in this example? Appreciate your patience with me on this.

@PointC Thanks for the write up I have been attempting to play with your codepen a little and sort of fit what I have in to there but am at a loss. I have just a continuous word with one single stroke and one thickness. And to understand your codepen better, with the clipping and masking you are reusing the "M" three times within the pen to get the affect correct, that is what it looks like to me per your drawing the word, showing the whole word, then zooming the word to view what is under the word? <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 368 95" style="enable-background:new 0 0 368 95;" xml:space="preserve"> <style type="text/css"> .st0{fill:#FFFFFF;} </style> <g> <path class="st0" d="M326.4,93c-3.9-2.2-6.8-5.7-9.3-9.3c-1.2-1.7-2.2-3.5-3.3-5.3c-0.6-1.1-1.5-3-2.8-3.2c-2-0.2-3.9,2.4-5,3.8 c-1.3,1.9-2.5,3.8-3.5,5.9c-0.5,0.9-1.6,3.1-2,4.1c-0.3,0.8-1.2,2-2.7,1.8c-1.8-0.2-2.2-1.6-2.2-2.3c-0.1-1-0.6-3.8-0.8-4.9 c-0.4-1.8-1-3.7-2.2-5.3c-0.5-0.6-1.1-1-1.9-1.1c-0.7,0-1.5,0.2-2.2,0.5c-2.1,0.9-3.9,2.4-5.9,3.5c-1.8,1-3.7,1.9-5.8,2.3 c-4,0.8-7.9,0-11.9-2.7c-1,0.7-4,2.7-6.1,3.7c-3.9,1.9-8.3,2.6-12.6,2.5c-3.9-0.1-7.8-1.1-11.3-3c-3.1-1.7-5.9-4.1-7.9-7 c-0.6-0.8-1.4-1.8-1.4-2.8c0-1,0.6-2,1.4-2.3c0.5-0.2,1.6-0.5,2.3-0.8c3.7-1.4,7.6-3.9,8.9-7.8c0.6-1.7,1.1-3.8-0.4-5.3 c-1.2-1.2-2.8-0.9-4.1-0.3c-2.9,1.4-6,5.8-7.7,8.3c-2.1,3.1-4,6.3-5.8,9.6c-1.2,2.1-2.3,4.2-3.3,6.3c-0.8,1.6-3.1,1.9-4.2,0.5 c-0.5-0.7-0.6-1.6-0.7-2.4c-0.1-0.9-0.2-1.8-0.4-2.7c-0.4-2.9-0.7-5.8-1.1-8.7c-2.7,3-6.5,5.9-10.8,5.8c-4.3-0.1-7.4-3.5-9.3-7.1 c-1.6,3.8-4.2,7.3-7.9,9.3c-3.4,1.9-7.5,2.1-11.1,0.5c-3.4-1.6-6-4.6-7.9-7.8c-5,6.7-12.1,13.7-21,13.5c-6.9-0.1-13-4.3-17-9.7 c-3.1,3.2-7,6.1-11.5,7c-4.5,0.9-8.7,0.2-12.2-2.6c-1.8-1.5-3.3-3.4-4.3-5.5c-1.8,3.8-4.8,6.9-8.7,8.6c-3.7,1.6-8,1.9-11.9,0.5 c-3.9-1.4-6.9-4.5-9.1-8c-2.1-3.4-3.6-7.1-4.8-10.9c-1.4-4.4-2.3-8.9-3.3-13.4c-0.4-2.1-1.5-7.6-3.1-10.6c-0.9-1.7-1.8-2.4-3.3-2.2 c-2,0.2-2.9,2.7-3.3,3.8c-1,3.2-1.3,6.6-1.3,9.9c-0.1,2.9,0.2,7.4,0.6,12.3c0.6,5.9,1.5,12.3,2.5,16.2c0.1,0.4,0.6,1.9,0.6,2.5 c0,1-0.5,1.8-1.4,2.3c-2.4,0.9-3.4-1.1-3.9-2c-5-7.6-8.1-16.2-10.7-24.9c-1.3-4.4-2.5-8.9-3.7-13.4c-1.2-4.4-2.5-9.8-4.6-13.5 c-1.5-2.8-2.7-3.7-4-3.5c-0.9,0.1-1.5,0.8-1.9,1.3c-2.1,2.5-3.9,9.7-3.8,20.5c0,4.4,0.3,8.8,0.7,13.2c0.7,7.2,2,14.3,4.4,21.1 c0.6,2,2.6,6.3,3.1,8c0.5,1.8,0.1,3.6-1.4,4.4c-2.8,1.4-4.6-1.4-5.6-2.7c-1.8-2.5-4.4-7.6-6.3-11.6C8.6,69.2,4.5,52.3,2.7,42.2 C1.6,36.3,0.2,25.3,0,20c0-1.4,0.5-2.8,2.4-3C3.8,16.9,5,17.9,5,19.8C5.2,24.9,6.3,33,6.9,37.2c2.4,15.4,7.2,31,9.4,36.1 c-2-8.3-2.5-22-2.5-26.4c0-4.1,0.2-8.2,0.9-12.3c0.3-2.3,1.7-7.6,3.8-10.3c1.1-1.5,2.6-2.8,4.4-3.3c2.1-0.6,4.2,0,6,1.2 c3.3,2.3,5,6.3,6.3,10c1.5,4.3,2.6,8.7,3.8,13c1.3,5,4,14.4,6.1,19.6c-0.4-3.9-0.8-7.8-0.9-11.6c-0.1-3.2,0-8.2,0.8-12.2 c0.6-2.9,1.7-6,4-8.1c0.3-0.3,2.3-1.9,4.5-2c3.2-0.2,4.6,1,5.4,1.6c1.6,1.2,2.7,3.2,3.6,5.5c1.4,3.7,2.1,7.2,2.3,8.4 c1,4.6,1.8,9,3.3,13.6c1.2,3.9,2.8,7.9,5.1,11.3c3.3,4.8,6.9,5.5,9.1,5.5c3.9,0.1,7.4-1.8,9.8-5c2.2-3,3-6.8,3.1-10.5 c-0.1-1,0.6-2.8,2.6-2.8c1.7,0.2,2.3,1.2,2.4,2.7c0.3,5.1,2.5,10.4,6,12.7c3.4,2.2,7.5,1.5,11.1-0.5c2.8-1.6,4.7-3.7,5.9-4.9 c-0.7-1.3-1.8-3.6-2.1-4.4c-3.2-7.9-4.2-16.6-3.8-25.3c0.2-4,0.9-8.1,2.4-11.8c1.4-3.5,3.8-7.2,7.6-8.5c2-0.7,4.3-0.4,6.1,0.7 c1.8,1,3.1,2.7,4,4.4c1.8,3.4,2.4,7.3,2.5,11.1c0.1,4.5-0.4,9.1-1.4,13.5c-0.9,4-2.1,7.9-3.8,11.5c-0.8,1.7-1.6,3.3-2.6,4.9 c-0.9,1.6-2.6,3.9-2.8,4.2c1.9,2.9,5.4,6.3,9,7.7c1.6,0.6,3.2,0.9,4.9,1c5.4,0.1,10.1-4.1,12-5.9c2.9-2.8,5.6-6.6,6.3-7.7 c-1.2-2.9-2.1-6.2-2.6-8.2c-1.1-4.4-1.8-8.9-2.1-13.3c-0.7-8.3-0.6-17.1,1.9-24.9c1.2-3.6,3-7.2,5.9-9.7c1.5-1.3,4-3,7.7-2.8 c3.4,0.2,5.8,2.9,6.9,4.7c2.3,3.7,3.5,9,2.4,17.6c-0.6,5.4-4.2,17.5-8.4,26c-1.8,3.7-4.1,8.2-6.1,11.1c2.1,4.5,5.4,8.5,9.6,8.6 c3.8,0.1,6.6-2.7,8.6-6c1.1-1.8,2.5-6.2,2.7-8.6c0.1-0.9,0.5-2.6,2.5-2.6c1.9,0,2.4,1.4,2.6,2.4c0.9,4.1,2.8,8.6,4.9,10.1 c1.9,1.4,3.8,1,5.5,0c1.8-1,3.1-2.4,4.4-3.9c0.7-0.9,2.2-2.9,2.4-3.3c-0.4-5.1-1-12.1-1.2-16.8c-0.5-10.3-0.4-19.4,0.9-28 c0.7-4,1.6-8,3.7-11.5c1-1.6,4-5.9,9.7-5.1c6.3,0.9,7.4,6.4,7.9,8.2c0.9,4.1,0.4,8.4-0.1,12.6c-1.2,8.6-5.4,21.1-8.3,27.4 c-1.7,4-4.9,10.6-7.4,14.4c0,0.5,0.9,7.9,1.1,10.1c2.1-3.8,4.4-7.5,6.9-11.1c2.4-3.4,5.1-7,9.1-8.7c5.6-2.3,9,1,10.1,2.6 c2.4,3.6,1.6,8.5-0.6,12c-2.2,3.6-5.8,6.1-9.6,7.8c2.3,2.6,5.3,4.6,8.7,5.7c4.1,1.3,8.5,1.1,12.6,0.1c2.8-0.7,5.4-2.3,7.8-4 c-2.6-3.4-4.2-7.8-3.8-12.1c0.4-4,2.5-8,5.7-10.5c3.3-2.6,8.3-3.7,11.9-0.9c3.6,2.8,3.6,7.9,2.3,11.9c-1.5,4.6-4.8,8.6-8.4,11.8 c5.3,2.8,8.9,0.7,12-1c3.6-2.2,7.7-5.4,12.2-3.7c3.4,1.2,5.1,4.7,6.1,7.9c1.1-1.9,2.2-3.8,3.6-5.5c1.3-1.6,2.7-3.1,4.5-4 c1.8-0.9,3.9-1.2,5.9-0.4c2,0.8,3.3,2.4,4.3,4.2c2.2,3.9,4.6,7.9,7.8,11c1.5,1.4,4.4,4.2,8.9,4c3.9-0.2,7.9-3.3,10.4-5.7 c2.6-2.5,5-5.3,7.1-8.3c0.7-0.9,2.8-3.9,3.7-5.5c0.6-0.8,2.2-1.4,3.5-0.5c1.4,1.1,1.1,2.8,0.5,3.5c-1,1.6-4,6-5.8,8.3 c-2.2,2.7-4.6,5.4-7.2,7.6c-3.1,2.6-7.1,5.2-12.1,5.5C331,95,328.6,94.2,326.4,93 M266.1,58.8c-2.1,1.8-3.5,4.5-3.6,7.2 c-0.2,2.9,1,5.9,2.7,8.2c3.1-2.9,6.2-6.2,7.5-10.3c0.5-1.7,0.9-4-0.2-5.8c-1.2-1.6-3.5-1.1-4.9-0.3 C267.1,58.1,266.6,58.5,266.1,58.8 M129.6,23.5c-1.9-0.2-3.9,2.3-5.1,4.8c-2.2,4.3-2.8,12.4-2.4,17.6c0.3,6.3,1.6,12.8,4.3,18.5 c4.4-6.6,7-14.5,7.9-22.4c0.5-4.2,0.6-8.8-0.4-12.7C133.2,26.4,131.9,23.7,129.6,23.5 M168.3,11.4c-2.6,2-4.1,5.3-5.1,8.3 c-1.2,3.6-1.7,7.4-1.9,11.2c-0.6,8.1,0.9,20.7,3.4,28c4.4-7.7,7.9-16.1,10.2-24.7c1.1-4.1,2-8.9,1.9-12.5c-0.2-4.3-0.7-8-3.1-10.3 c-0.7-0.7-1.5-1.1-2.5-1.2C170.3,10.2,169.2,10.7,168.3,11.4 M217.6,8c-2.8,5.2-3.5,13.1-3.7,17.6c-0.6,9.4-0.1,18.9,0.6,28.3 c4.2-8.2,7.6-16.9,9.9-25.9c1-3.8,2.7-12.1,2-17.4c-0.2-1.8-0.8-5-3.6-5.5C219.9,4.5,218.4,6.5,217.6,8"/> <path class="st0" d="M100.5,49.9c0,2-1.6,3.6-3.5,3.6c-2,0-3.6-1.6-3.6-3.5c0-2,1.6-3.6,3.6-3.6C98.9,46.4,100.5,48,100.5,49.9"/> <path class="st0" d="M193.2,47c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.5c0-2,1.6-3.6,3.5-3.6C191.6,43.4,193.2,45,193.2,47"/> <path class="st0" d="M358.8,87c0-2.5,2-4.6,4.6-4.6c2.5,0,4.6,2,4.6,4.6c0,2.5-2,4.6-4.6,4.6C360.8,91.5,358.8,89.5,358.8,87 M359.5,87c0,2.1,1.7,3.9,3.9,3.9c2.1,0,3.9-1.7,3.9-3.9c0-2.1-1.7-3.9-3.9-3.9C361.2,83.1,359.5,84.8,359.5,87"/> <path class="st0" d="M361.5,84.6h2.1c0.6,0,1,0.2,1.3,0.5c0.2,0.3,0.4,0.6,0.4,1v0c0,0.8-0.5,1.2-1.1,1.4l1.3,1.7h-1l-1.1-1.6h0h-1 v1.6h-0.8V84.6z M363.5,86.9c0.6,0,1-0.3,1-0.8v0c0-0.5-0.4-0.8-1-0.8h-1.2v1.6H363.5z"/> </g> </svg> I do have the svg here that I need to work with I was just putting each "section" similar to how you have them, does that sound like the right path to go down? Thanks!

https://nextcloud.travisboss.duckdns.org/s/ZSmx4godCcM4xTA I have a mp4 to show this animation, I have the static site at the end done so the easier part is done haha. But am lost on how to create the actual animation and come through on the M as it shows, if you cannot see the link above please let me know and I'll adjust. Any pointers and places I should look at accomplishing this? Appreciate it.