Jim Nayzium

Solved my own issue again --- with ON LOAD event listener first. I guess the width somehow triggers sooner but the height only gets detected aftera. full call of ON LOAD like this $("#sidebar_boat_thumb_img").on('load', function() { console.log("On Load", gsap.getProperty("#sidebar_boat_thumb_img", "height")); });

Whelp, now that I have the moron-mistake corrected, I am finding that the gsap.getProperty( "#X", "height") calculates to ZERO unless the height is explicity stated inside the image tag with a style tag. Does tthat sound fishy or is that how it will be?

NEVER MIND - I am a moron!!! I was using quick tester code on the html page like <script> let width = gsap.getProperty('#etc'); </script> And just had that script tag above my HTML like a complete DOLT... as soon as I moved it below the HTML of course it worked as expected and calculated the dynamic width!

What I mean by this question is if my img html code is like this: <img id="sidebar_thumb_img" class="thumbnail_image" src="{{%dynamic_image%}}"> And this image sits inside a div that is not a set width... will gsap.getProperty("#sidebar_thumb_img", "width") not actually "calculate" the width, but return undefined?

Just posting here (cuz I forgot to update it since it was such a simple fix) but just doing either of the two suggestions totally solved my issue!. Just letting anyone who finds this later know.

I think that’s a default file that loads with bootstrap5 or with the jconfirm j query pluggin I use everywhere. Is there a way to cancel it out maybe in my override css. What should I set the behavior to to undo what it’s doing to scroll to plug-in?

I tried isolating it and couldn’t recreate it. So I’m assuming the conflict is with the scrollTo being on the page maybe in more than one place. the password and username is U: vvyrhjuyvm P: s3mJTpJDX6 if you could take a look and see if something jumps out I would be forever in your debt! I thought I had in the correct folder to avoid the password from the staging environment. im fairy certain i have the plug-in registered for other uses on the page. And I don’t have any css animations that I know off honestly. I am using the flip plugin alongside the scrollTo and scroll Trigger for the top portion to animate. but it’s the blue menu buttons that appear in the animated fixed to top sticky drop down that when they are clicked it won’t work as expected. i tried isolating it for an hour to solve it and can’t recreate the issue isolated. UPDATE: on my iPhone it works decently. It’s in chrome and when I use the BACK ease that it won’t work correctly. I think I removed the back ease from it. But you can actually use the code above and enter in console and change the ease to back and duration and see the stuttering im talking about.

My link to the codepen is actually a test html page I set up. Sorry for the super complex code view but I can't narrow it down. I am sure I am providing my own user conflicts here somehow I guess... but all I am trying to do is have the little blue menu that appears AFTER You scroll past the photo of the BOAT when it's clicked, scroll to the id on the page. The javascript that controls the click action for those is located in the /dealerlogin/js/common_scripts_for_both_sides.js file... and loolks like this: $('.categories_on_page').on('click', function (e) { gsap.to(window, { duration: 1, scrollTo: { y: "#id_scroll_here_" + $(this).data("scroll-id"), offsetY: 220 } }); }); No matter what EASE I put on the click action and. no matter how long I make it animate... it won't smoothly animate and come to rest. It just starts in super slow motion and then HURRIES to its resting spot. I want to use a BACK EASE if possible. https://phpstack-107476-2209282.cloudwaysapps.com/dealerlogin/testing/gsap_test.html

Is it bad to have two elements with the same id= and be targeting them both with javascript innerHTML updates, if only ONE of them is ever visible to the page because of media queries? I am setting the display:none and display:block with media queries to make sure and I am updating their HTML simultaneously on the page with javascript with the same script. But I only ever have ONE of them showing to the page. I have it all working but was curious if I should be writing the extra lines to update two div_id's innerHTML since they are "in the running code of the page" but are not "displaying" etc... The only time I feel like it's an issue is when someone resizes their screen live while viewing the page and I would need the javascript to re-run. But other than that, I was just wondering what best-practices dictate in this case above? Sorry for the fairly newb/javascript level question.

that makes me feel better, then. Meaning the trial and error is part of it and I am not wasting time by not knowing something !! I ended up building a small input form with variables so I could just enter stuff and click a button to make it roll with the values I submit hahaha... probably overkill but it is working well. THANKS for the first line code deal... That's just javascript shorthand right? Meaning it could also say function() { } etc... ??

Pretty sure I figured it out but this seems like over-engineering (which is what I am usually guilty of! ) Now if someone could teach me why this timeline is almost 40 seconds long? I am sure I caused that but can't figure it out. https://codepen.io/JimNayzium/pen/dyvaRBN?editors=0010

A follow up question about such a similar thing I put it here in the same thread. In the below code, is there a way to tell the physics2D to not DELAY the first one? I want the explosion to be "activated" right away with a click, then for it do the random(0,3) portion. Is the only way to setup a single shot with an onStart function that loads the below I guess? physics2D: { velocity: "random(200, 700)", angle: "random(-85,-100)", gravity: 100 }, delay: "random(0, 3)"

The gravity and velocity of the generator of the physics2D plugin are awesome. But I am curious what the actual MATH is. If I wanted to simulate a Roman Candle sitting at the bottom of my Container in the middle. (It's imaginary and invisible) and it "shoots" the particles created by a for loop createElement(div) etc... How can I anticipate what the Velocity needs to be relative to the gravity, so I can randomize it but not have some of them shoot so high they don't get seen falling in the timeframe duration and also not weak enough that some shoot up a third of the screen and then fall five screen heights below it... The Pen should show what I mean. OF course I can plug in numbers and continue trying and add a little friction etc... but I just want to understand what it's actually doing. Like is Gravity: 10 / Velocity:20 going to have the same impact as Gravity: 20 / Velocity: 40 ??? etc... that's what I am asking. Because what I am trying to actually accomplish is have MOST of my shots go ALMOST to the top of the screen... and then go away at ALMOST the bottom of the visible screen/viewport. But as it stands now by trial and error when I make the top point be perfect, then they fall way way way down out of the screen (which is why the overflow:visible is present so you can see it.) Anyone? THANKS!! Loving GSAP!

This is potentially EXACTLY what I need! I will work on my side and post back when I can get it simplified to show you. Thanks so much!

Thanks ahead of time for any help, everyone. What I want to have happen is for the two blue buttons, upon clicking the "go away" to animate their scale up to fill the container as the red one is animating itself out. Using a display:flex container is part of the necessary design elements around it as this is only a small "zoomed in" area of code to utilize this in my project. Meaning, if FlexBox is part of the restraints to it working that's not great news. As prior to this I used a FLIP animation to get us to this point now... where I break a div off from the static position and fix it to the top on a scroll trigger action -- prior to that there were the three items shown here STACKED in a "display:flex; wrap-direction: column;" DIV, and I used FLIP.to in order to change their orientation to "wrap-direction: ROW" so a tall thin DIV animates out to a WIDE LONG div. Below pretend like the xxxx represents the normal body background image and the pipes " | " represent the width of the <main> container tag in the HTML page. The tall DIV animates to become a FULL WIDTH : 100vw DIV element so I need the "display:flex" when that happens to change from column to row direction, and you've already helped me make that happen using FLIP and SCROLLTRIGGER! xxxxx| \\ 1 // |xxxxx xxxxx| \\ 2 // |xxxxx xxxxx| \\ 3 // |xxxxx FLIPPED TO --> \\ 1 // xxxxx | \\ 2 // | xxxxx \\ 3 // THEN, when they are horizontal -- that's where this animation in this thread will come in. So I need the display:Flex CSS to remain in place and also accomplish the scale animation of the 2 blue buttons and red banner shown in this codepen. NOTE: The only way I figured out how to the above PIPE-xxxx animation was to use FLIP.to and change the CSS applied to the div. If there is another way to accomplish all this, I am up for hearing it. But I am VERY CLOSE to home doing it all this way, and I can live with the animation on this question staying as is, but I just thought it would be easy for someone to figure out! (Any use of GRID and "flipping" back and forth from Grid / Flex displays just instantly changed and didn't "truly animate" the movements of the divs. Even the flex/row/column switch doesn't technically "animate" but I can live with the results of it. I am trying to get a smooth movement of the blue buttons growing as the red banner shrinks. In both directions. I am CERTAIN this is doable, just not certain with the flex boxes and other constraints I have on the page if it's possible. THANKS!