kylerumble

@OSUblake Thank you for the help. i'm going to go read up on a few of those points such as SaveStyles, progress and clear. Kyle

@mvaneijgen Thank you so much. I had seen the ScollTrigger matchMedia, but just figured it was only for scrolling. If I use Chrome and toggle device toolbar though and toggle between desktop/mobile and back again, there is a weird behavior. See video https://www.loom.com/share/5c7f2d06396342d3ad6c6749a46409dd

I have two different animations I'd like to run on my menu. One for desktop and one for mobile. For Desktop everything is fine, for mobile I just want your typical slide up/down without the list item animating. Could someone take a look at my code and tell me how I could quickly clean this up? Thanks.

@mikel Pretty much exactly what I need to get me where i want to go! Thanks so much. My only question would be how can i shrink the height of the hero somewhere within the timeline near the end so that the hero section is say "500px" high. Just an example, as i'll set it dynamically on screen size. I'm just trying to solve the mobile screen issue, where this entire section is full height. What i tried as an example, was to just set the height of the hero to 50vh, but that just cuts off the svg. The goal is to arrive at the end with a hero section that would be consistent in height across the site. By the way, it's incredible what you can do! in hours or minutes compared to days for me! I'm really excited to get better at this, and really appreciate the help. Thanks again, Kyle

@ZachSaucier Totally understand. I do appreciate your time. And I purchased the ShockinglyGreen. Ok, so I have a working part of what i need. I used an existing demo modified it and added what i needed. https://codepen.io/kylerumble/pen/Rwazrxp I'm just having issues with pinning. The codepen stops working if I add pinning to the scroll trigger. you can see how I've commented it out. I'd really appreciate it if you could help with that. I have spent a few hours trying to figure it out. Thanks so much. Kyle

@ZachSaucier I've removed the unnecessary animations. https://codepen.io/kylerumble/pen/abNrymb What I'm looking to do is similar to this: https://codepen.io/osublake/pen/QWyLVLO it's the closest demo I could find. - I have an expanding red circle (part of the SVG, but really doesn't need to be), which then covers the entire container (not the page). - From there I want the container to shrink vertically, and center the text (which is not part of the SVG for this reason) - and have the white svg arc scale up - and then the background is unveiled. - finishing up looking like this https://www.dropbox.com/s/gmdfpk84l83dwaj/screen-4.jpg?dl=0 I want this to all be fluid. Issues I'm having which are probably obvious.: - figuring out how to piece all 4 parts together Please let me know if Greensock has a beer fund to donate to. Kyle

@ZachSaucier Someone offered under jobs, but the timeline was too far away. I can create a stripped out version of what i need. Thanks so much. Kyle

So I'm almost there, but yet still far away! So here is my updated Codepen: https://codepen.io/kylerumble/full/ExKzyxR what I'm trying to achieve is at the end have the circle grow out, and then show the #arc svg at the bottom. So that it ends like this https://www.dropbox.com/s/gmdfpk84l83dwaj/screen-4.jpg?dl=0 But it's looking horrible. Issues I'm having: - I'd like the hero section to shrink in height. I'm having height issues with the pinning etc. This part confuses me - make the circle growing and the arc look like they are joined. I've seen something that would look awesome here: https://codepen.io/osublake/pen/QWyLVLO But I am not sure how to pull that off. I'm sure this would look so much better as a mask. I'm hoping someone can help. I'm buying beers, or I'd even give you money. I'm stuck, and I've spend days trying to figure this out. I'm excited to pay it forward and help others when I can finally figure this stuff out.

@Abi Rana Thanks. When would you be able to start? How long would you expect the job to take? Kyle

Well, I've attempted this myself, but I'm struggling too much. I'm new to GSAP and animations. And I've reached a point where I need help. Files attached: https://www.dropbox.com/sh/yrhq6gj6j8rlyrh/AAAtGV0UVkgmpko7CQs_lxlua?dl=0 screen-1.jpg screen-2.jpg screen-3.jpg screen-4.jpg screen-5.jpg arc.min.svg Here is a codepen of where I have gotten so far: https://codepen.io/kylerumble/pen/mdPvvoP I'll do my best to describe what is needed. Let's call this a "Hero" section" that starts as a group of circles, and finishes as a background image with the centered text that has a curved bottom. Steps: Screen #1 - this is done, see CodePen Screen #2 - this is also done already, see Codepen. I would however like to have text added to the outer circles as seen in screen #1. I found positioning text a bit cumbersome. Screen #3 - red inner circle grows and covers the section. And there is a bottom arc that needs to be part of the animation as well. I've attached the arc as it has to match that aspect ratio. Something like this would be amazing if possible https://codepen.io/osublake/pen/QWyLVLO as it would include step #5 and if it could also incorporate Step 4 at the same time im guessing. Screen 4 the section shrinks in height and positions itself at the top. this is where we get the correct size of the hero established. It would be great if i could manually adjust values for this height. Screen #5 - background image fades in. This background image will have a pseudo element on top of it which has the overlay style. the background image will be part of the markup, and easily changed. The overlay just makes it look red. So any image can be used for testing, and just use a .5 transparency on the overlay for a working example. Additional notes, you can see at the bottom of screen #1 and screen #5 there is a section below. I'll need next section to animate back up into position in screen #5 similar to how it was in screen #1. I need to close that space after the animations. And this needs to be done without premium plugins if possible. Budget: I'm not at all sure how long this will take. Will $400 cover this? I respect professional services, so I realize I'll be paying for quality. Timeline: Tomorrow, Monday, Tuesday? sorry its a bit of a rush job if possible.

@mikel Thanks so much for the help! Kyle

Hello, I'm trying to move all the outer circles behind the center circle on scroll. But I can't figure out how to find the center XY coordinates. I thought what i was doing was correct, but it's not working. Also, is there a way to trigger them sequentially? I feel like I saw a video tutorial a while back on V3 and the ability to move an element to a relative position to another, but I can't seem to find it. Thanks, Kyle

Wow! Thanks so much for all the help to all of you. I'll implement those changes. @ZachSaucier I agree, I'll move the animations to the SVG, I believe I originally did that because i was having trouble sequencing the pins. GSAP is absolutely amazing, but there is so much to learn and grasp. So it's been a lot of trial and error. Kyle

Hello, Well, here I am asking for help. I tried figuring this out, but I'm just hitting a wall. I have some pins i need to animate in a bouncing effect. I also need them to be staggered. I've got a wokring demo, but my bounce effect is just horrible. And doesn't look anything like a bounce effect. the best I can demonstrate what I'm looking for is this https://codepen.io/surjithctly/pen/yedHk except I want it to be a very small amount of bounce, just so that the visitors eyes are drawn to the pins. something like this https://codepen.io/dctdevelop/pen/WbqbLb Thanks very much for the help. Kyle