xoxoxoxo Posted March 30, 2020 Share Posted March 30, 2020 Hello, I'm trying to animate the images out of the viewport and then make them appear from the bottom as if they were wrapping around the height of the viewport. I'm trying to repeat this N times and then make the animation stop at the original position of the images. Note: "0" on transform values doesn't start from the bottom My modifier/wrap function doesn't make sense and I can't figure out how to fix t. Any help would be appreciate it! See the Pen BaNMWJb?editors=1010 by taher-space (@taher-space) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 30, 2020 Share Posted March 30, 2020 Hey nullhook. You've got to take into account the position of each element. Something like this should work: See the Pen poJGpVJ?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
xoxoxoxo Posted March 30, 2020 Author Share Posted March 30, 2020 Thanks for this! Another question would be: How can I instantly set opacity 1, then 0, and element's background all together?t1 .set(el, { opacity: 1 }) .set(container, { backgroundColor: el.getAttribute("data-bg") }, '-=0.1') .set(el, { opacity: 0 }); Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 30, 2020 Share Posted March 30, 2020 6 minutes ago, nullhook said: How can I instantly set opacity 1, then 0, and element's background all together? That code doesn't make much sense. Given .set() runs immediately, then all 3 of your lines will run at the same time (well, sequentially, but only be rendered once after they are all processes). It's the same thing as just .set(container, { backgroundColor: el.getAttribute("data-bg") }).set(el, { opacity: 0 }). What are you trying to do? Maybe explaining it in context of the demo would be helpful. Link to comment Share on other sites More sharing options...
xoxoxoxo Posted March 30, 2020 Author Share Posted March 30, 2020 I'm trying to turn each box's opacity on and off with respect to the background color. for ex, When the box's opacity is 1, the background color should also be set at the same time, and when the box's color is 0, the background color should also go away...rendering the next box. After it loops through all box's, onComplete it should stagger all the element's opacity on. I believe this has to do something with overlapping? Here's the See the Pen rNVPdEB?editors=0010 by taher-space (@taher-space) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 30, 2020 Share Posted March 30, 2020 18 minutes ago, nullhook said: I'm trying to turn each box's opacity on and off with respect to the background color. for ex, When the box's opacity is 1, the background color should also be set at the same time, and when the box's color is 0, the background color should also go away...rendering the next box. So you want the boxes to animate one by one? Then once every box has finished animating show them all? Link to comment Share on other sites More sharing options...
xoxoxoxo Posted March 30, 2020 Author Share Posted March 30, 2020 1 minute ago, ZachSaucier said: So you want the boxes to animate one by one? Then once every box has finished animating show them all? Yes. Opacity and background color should be set at the same time. As you can see in my code there is an odd delay between these. Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 30, 2020 Share Posted March 30, 2020 You really should add a seizure warning before playing the animation - those jumping background colors could cause one for sure. Sorry, I still don't understand what you're trying to accomplish. Your code is a bit murky. Is this a completely separate question from the previous one? Or are you hoping to mix the two? And what's wrong with the demo that you posted? Link to comment Share on other sites More sharing options...
xoxoxoxo Posted March 30, 2020 Author Share Posted March 30, 2020 5 minutes ago, ZachSaucier said: 5 minutes ago, ZachSaucier said: You really should add a seizure warning before playing the animation - those jumping background colors could cause one for sure. Sorry, I still don't understand what you're trying to accomplish. Your code is a bit murky. Is this a completely separate question from the previous one? Or are you hoping to mix the two? And what's wrong with the demo that you posted? Haha. Sorry, I should give a warning! Although, this should run on a different tween, I'm trying mix them all together. The colors and images don't seem to come in and go out at the exact same time. Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 30, 2020 Share Posted March 30, 2020 You should use the position parameter: See the Pen wvaNjOL?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
PointC Posted March 30, 2020 Share Posted March 30, 2020 25 minutes ago, ZachSaucier said: You really should add a seizure warning before playing the animation - those jumping background colors could cause one for sure. +1 That is quite jarring. 1 Link to comment Share on other sites More sharing options...
xoxoxoxo Posted March 30, 2020 Author Share Posted March 30, 2020 @ZachSaucier The background color and opacity 1/0 doesn't seem to sync together? I'm not sure if moving positions would help? Perhaps creating a timeline and adding it to an array and playing each one of them together with 1s? I'm not sure how achieve this though. The image, background and opacity should be connected like a layer I think. Link to comment Share on other sites More sharing options...
xoxoxoxo Posted March 30, 2020 Author Share Posted March 30, 2020 I figured it out by adding an empty set and overall delay to 0..set(container, { backgroundColor: el.getAttribute("data-bg") }) .set(el, { opacity: 1 }) .set({}, {}, "+=2") .set(el, { opacity: 0 }); 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