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!

That's awesome! Thanks for the break down! Just what I was wanting to see... tangible examples of it all like the demos. I am looking forward to getting my first thing finished and pushed to the demo servers from my machine to show it off... I am sure folks will be able to improve upon it!

AHHHH! I think it clicked for me now. So basically, a variable would always be more concise way to store ONE TWEEN. Versus going to the trouble to declare a full timeline object to simply store ONE tween in it, right? Meaning you could feasibly have declared "let tl2 = gsap.timeline" on the ".box" one also, but since there only would have been ONE tween inside that Timeline, it just makes more "conciseness" sense to delcare it as a variable and roll with it so you can reference it later that way. So it would be fair to say, VARIABLE is best used as a "container" for ONE tween you'd want to reference later. TIMELINE is a best used as a "container" for MULTIPLE TWEENS you want grouped together (for whatever purpose that may be.) ??

Pretty sure I meant "let" (and or var) like when would you use a variable to hold on to your TWEEN versus wrapping that tween into a timeline. (was what I was getting at.) I understand when a timeline mentally jumps out if you need something to animate sequentially. But why ever us "let my_tween_var = gsap.to(); " etc... versus wrapping it in a simple timeline ?

I see this in the timeline tutorial... so the object is being declared and defined and I assume things "come along for the ride" once that has happened. var tl = gsap.timeline({repeat: 2, repeatDelay: 1}); But then I also see this type verbiage in places where just a variable is declared: let tween = gsap.to(".class", {rotation: 360, duration: 5, ease: "elastic"}); Which let's us do certain other things with that GSAP call on the .class etc... So, I get the TIMELINE visually. And as a former Flash Actionscript 2.0 guy, I totally picture LITERAL timelines in my brain when I see it tl.to( etc... BUT can you break down for me how " tl.to " is different from chaining the gsap objects back to back? Or is it not possible to chain them to each other? tl.to("#id", {x: 100, duration: 1}); tl.to("#id", {y: 50, duration: 1}); tl.to("#id", {opacity: 0, duration: 1}); ////// VERSUS gsap.to("#id", {x: 100, duration: 1}).to("#id", {y: 50, duration: 1}).to("#id", {opacity: 0, duration: 1}); And also can someone provide for me the "handy little way to remember" when it's best to use VAR versus TIMELINE ?? Like a "general rule of thumb?" I get how wanting to scrollTrigger SCRUB would be a time for a TIMELINE. But other general philosophical reasons one over the other?

IT TOTALLY IS... and my confusion I think was wrapped up in not fully grasping how to do the END. I kept making the footer the endTrigger and it would create a scenario where the body text woudln't scroll UNDER the PINNED div... but scroll all the pin-spacer white-space up to it then push it off with it. I kept messing with z-index and other stuff and coudn't make it make sense. But the end =+1 made perfect sense. For some reason, I had stuck in my brain that the PINNED deal would UNPIN as the endTrigger was reached also. That wasn't from the tutorials... that was just insanity stuck in my brain!

I LOVE how elegantly simple the real solutions always are!! I am sorry to be such a pain in the aggressive "THIS IS WHAT I AM DOING!!! HELPPPP!" hahaha -- you guys are awesome to help so much! So dumb question for the hobbyist: I am always confused by the CSS syntax of #first.active { /* something */ } VS #first .active { /* something else * / } I always thought anything bookended like the first thing was just saying "Look for all the .active classes inside the element with the ID of "first." But apparently when there is no space, it's saying, "Look for the element with the ID of "first" AND a class of "active," right? And the second one above is saying, "Look INSIDE the element with the id of "first" and do something to all the elements inside that element that have the class "active" ... yes? Because when I put a space in it, it breaks it, is basically what made me conclude the above.

THIS IS EXACTLY it. thanks so much! I will check it all out and see what I left off and what you changed!! Thanks JACK!!! At first glance I am confused already why the start and end point are the same but maybe that's already making sense as I think on it. Like my actual "need" was more like a trip-wire. So when you trip over this wire in either direction - "do these other things..."

Okay - I went and watched the entire video, did a few tutorials, tried to strip it all the way down and it got WORSE for me!!! I am sure I am doing something inherently wrong with this thing... https://codepen.io/JimNayzium/pen/YzZyZrP Just trying to have the grey bar jump out to FIXED position, go to width of 100% and have the other stuff scroll up under it.... If you only view in this window it may look "right" but with each scroll up and down the replacement sends it farther to the left and make your screen wide enough to see it... the grey bar never gets to "100 percent."

OKAY maybe I am a MORON!! I think I just figured it out. I will repost here. Don't spend time solving this yet!! hahaha I feel like I didn't understand it fully the first time, but the sample now makes sense. THE PINNED div is inside the SCROLLED div... so that's why the lenght gets so long... But I am still confused as to why the div gets UNPINNED and moves up the screen before the "#footer" arrives! I will figure it out though.

Okay - so I dove in on the ScrollTrigger and YES it seems it will be super easy once I figure out the pin-spacer shenanigans! In the sample you give with the orange/red/blue the pin spacer code looks like this: <div class="pin-spacer" style="place-self: auto; grid-area: auto / auto / auto / auto; z-index: auto; float: none; flex-shrink: 1; display: block; margin: 5.76px 0px 19.2px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 800px; height: 86px; padding: 0px;"> For mine, all I want to happen is basically to create a regular top menu that hangs there the entire time the user scrolls all the way to the bottom of the page. So I logically put "#footer" as the "endTrigger:" -- and what I get is a 7000pixel deep white space then all my content, which then bumps the PINNED div and takes it up and away... I want all my other divs to scroll up under it like it's the "new menu" type deal. THIS Is what my pin-spacer div looks like <div class="pin-spacer" style="z-index: auto; float: none; flex-shrink: 1; display: flex; margin: 0px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 1000px; height: 7479px; padding: 0px 0px 7049px;"> The remaining content on the page is a combination of a bunch of FLEXBOXES --- I am trying to isolate the issue out to find the conflict and post a codepen, but it's a doozy to get it all pulled apart and what not. I am simply tryign to do this: gsap.registerPlugin(ScrollTrigger); ScrollTrigger.create({ trigger: "#pin_me", start: "top top", endTrigger: "#footer", end: "top top", pin: "#pin_me" }); Is there a simple thing I am missing? I realize the white space is there to compensate for the PINNED Div right? But my pinned div is like maybe 200-300pixels tall... not 7000. The entire page down to the footer is 7000px which is like what it seeems like its calculating? I came back and edited my original PEN and recreated the issue there (not the real page as referenced above with 7000px but the problem of all the whitespace is still there on this codepen so it's something I am doing I assume!) https://codepen.io/JimNayzium/pen/wvJKogX