ladlon Posted May 28, 2020 Share Posted May 28, 2020 Hi. So, I am trying to have an item moving upwards, but each time being at a random horizontal position. I tried doing it via this: gsap.fromTo(".thing", {left: "random(10,90)", bottom: "0%"}, {bottom: "70%", ease: "linear", repeat: -1, duration: 1.5}); But, it seems the horizontal value doesn't get randomized. I'm also assuming that if I define a property in the first block (From), but do not have a matching pair for it in the second block, it will just remain/retain that established value, and not tween... or am I wrong on that? -Am I utilizing the random() feature properly here? -Do I need a matching pair for the randomized property... and if so, would I do it by setting the randomized value beforehand into a variable, and then using that variable in both the From and To blocks? -In my tests (where I added a second (matching pair) randomized left in the second column, it seems that with each repeat, it used the same values, rather than generating new random values each cycle. Is that the case? (It retains the initial random value, and uses it with each cycle?) If so, is there a means to have it infinitely loop, yet generate/use a new randomized value for the tween each time? (I'm very new on this, but I'm suspecting maybe you do a single cycle tween, and then put it in a timeline, and have the playback head either reset or loop after each timeline play?) I have the feeling that maybe there's other commands/features that I haven't looked into yet that might address this sort of thing. I'm currently keeping pretty restrictive, using just the To, From, and FromTo type basic things. I'll probably run into the solution as I continue studying further, but if anyone wants to chime in, that would be awesome! (BTW, I'll say it here and now... Great people here on the forum. Impressively prompt and helpful. Thanks!) Link to comment Share on other sites More sharing options...
ladlon Posted May 28, 2020 Author Share Posted May 28, 2020 UPDATE: Okay, it looks like maybe it would use the gsap.set command... and that works, but it only triggers once (I have it before the actual positional animation tween). Each time I refresh the browser, the horizontal position is sucessfully randomized... but since it is on a code like before the positional tween, and because the positional tween is an infinite repeat, it just repeats using the same horizontal value. What I would need to do, is have the positional tween a single cycle, and then somehow combine the two lines (set line and positional tween line) into some sort of infinite loop. Not sure if GSAP has that, as I haven't run into that sort of thing yet. So, I'm going to search for that. Up to now, it only seemed like a GSAP loop is all within a single tween... but, I'm sure I'm wrong on that. Back to the books... Link to comment Share on other sites More sharing options...
ladlon Posted May 28, 2020 Author Share Posted May 28, 2020 Put both lines in a timeline, and then loop the timeline? Am I close?.. Link to comment Share on other sites More sharing options...
PointC Posted May 28, 2020 Share Posted May 28, 2020 Have you tried making a simple demo? It doesn't need to be your actual project assets. Maybe try something with a few divs so we can see what you're doing and better advise you. 2 Link to comment Share on other sites More sharing options...
ladlon Posted May 28, 2020 Author Share Posted May 28, 2020 Ya, I'll be making one. Just been trying and sorting it out over here. I've read up on codepen (...never had used it before), so now I have no excuse! Just going to take a while to set up a demo version. Feels like I'm really close, but there's some little factor that is preventing it from working as intended.... Link to comment Share on other sites More sharing options...
ladlon Posted May 28, 2020 Author Share Posted May 28, 2020 See the Pen BaogxXE by ladlon (@ladlon) on CodePen Link to comment Share on other sites More sharing options...
ladlon Posted May 28, 2020 Author Share Posted May 28, 2020 Ugh... I was going to ask about how to edit codepen (since the tutorial doesn't seem to show how to actually embed the finished codepen item)... but I thought, "Hey, I should just figure it out myself, instead of pestering the good people here....". So, I did a search, and the one vid I found said to just paste it in the post... and that obviously didn't work. I tried a direct paste (which just literally pasted the text, rather than treating it like code).... So then I took what seemed to be the logical step, and did a 'code' insert... and got that lovely window. (Facepalm) Okay, now that I humiliated myself, could someone tell me the right way to do this? BTW, how DO you remove inserted code block? There doesn't seem to be any delete command for them. Wow, I'm leaving a great impression here, eh?! (Sulk...) Link to comment Share on other sites More sharing options...
PointC Posted May 28, 2020 Share Posted May 28, 2020 Just grab the CodePen link and paste it into your post. No code. No embed. Just paste the link and you're good to go. I fixed the other one for you. Link to comment Share on other sites More sharing options...
ladlon Posted May 28, 2020 Author Share Posted May 28, 2020 Yep, I just noticed a reference to that... (I have a TERRIBLE habit of figuring stuff out immediately after making a forum post... It's like CLOCKWORK with me!) So the URL in the browser window containing the codepen.io website (and my current project I did in it)? Link to comment Share on other sites More sharing options...
ladlon Posted May 28, 2020 Author Share Posted May 28, 2020 Messed up again... I tried pasting the URL, and I got text saying something like 'View the Codepen from ladlon"... but I was expecting it to instead show the usual codepen window I'm seeing in everyone else's post. Am I doing it wrong? (Good grief, I'm feeling like some senior citizen who never used a computer! I'm normally really good with stuff... Honest! ) Link to comment Share on other sites More sharing options...
PointC Posted May 29, 2020 Share Posted May 29, 2020 You had it right. I saw your post and the demo was showing correctly. You may need to refresh the page to see it correctly after you paste in the URL. 1 Link to comment Share on other sites More sharing options...
ladlon Posted May 29, 2020 Author Share Posted May 29, 2020 Okay, I'll try it again. Just didn't want to accidentally post something that was a security issue! (...That would have been the cherry on top of all this! Ha!) Link to comment Share on other sites More sharing options...
ladlon Posted May 29, 2020 Author Share Posted May 29, 2020 See the Pen BaogxXE#code-area by ladlon (@ladlon) on CodePen Trying to have a repeating upward movement tween, but with a different horizontal value each cycle. Win7 GSAP3 Link to comment Share on other sites More sharing options...
ladlon Posted May 29, 2020 Author Share Posted May 29, 2020 Neat, it worked! I feel like a real club member now, me with all my codepen stuff happening and all that! I'm big league now! Link to comment Share on other sites More sharing options...
PointC Posted May 29, 2020 Share Posted May 29, 2020 I think you're looking for the repeatRefresh property. Under special properties of the vars object. https://greensock.com/docs/v3/GSAP/Tween I forked your pen and added that for you. I increased the values in the random string so it would be more obvious that it was working. See the Pen da69dc51d32c14dbb73819c9c3a1c55e by PointC (@PointC) on CodePen 3 Link to comment Share on other sites More sharing options...
ladlon Posted May 29, 2020 Author Share Posted May 29, 2020 Cool! I'll try that out. Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now