Dipscom last won the day on December 5

Dipscom had the most liked content!

Dipscom

Moderators
  • Content Count

    1,272
  • Joined

  • Last visited

  • Days Won

    41

Dipscom last won the day on December 5

Dipscom had the most liked content!

Community Reputation

2,199 Superhero

5 Followers

About Dipscom

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling
  • Location
    London

Recent Profile Visitors

7,829 profile views
  1. Dipscom

    Three.js properties

    You know, I never got around to checking this plugin out... Shame, shame, shame...
  2. Dipscom

    TweenMax in Loop - Delay Issue

    Great to hear you got it working. And I hope you understood why Blake's code work and yours didn't.
  3. Dipscom

    TweenMax in Loop - Delay Issue

    Did you see Rodrigo's comment where he pointed out that you have your onStart call inside the pixi:{} config object? That's not meant to be there. If I move it outside the pixi config object and put a console.log call into the onStart, I see it fire according to the delay as expected. Your problem here is not with GSAP but with JavaScript scoping. You are asigning new values to the same variable and because it's the same variable, its value gets updated every loop call. So, you think something's wrong but it's not. It's expected behaviour. What you want to do is create a brand new variable inside the for loop to store the values you need. So. Instead of: for (k in js1["slides"]) { // Wrong way to set these variables up v = js1["slides"][k]["snips"]; text.x = 0; dur += 5; textTitle = js1["slides"][k]["title"]; console.log(textTitle + " start at sec:" + dur); TweenMax.to(text, 1, { pixi: { x: 720 / 2, }, onStart: function() { text.text = textTitle; } delay: dur, ease: Power2.easeOut }); } You need: for (k in js1["slides"]) { // Wrong way to set these variables up const v = js1["slides"][k]["snips"]; text.x = 0; dur += 5; const textTitle = js1["slides"][k]["title"]; console.log(textTitle + " start at sec:" + dur); // You will also need a new "text" reference if you are planning on having two lines appear staggered TweenMax.to(text, 1, { pixi: { x: 720 / 2, }, onStart: function() { text.text = textTitle; console.log(textTitle) } delay: dur, ease: Power2.easeOut }); }
  4. Dipscom

    TweenMax in Loop - Delay Issue

    Hi dazzafact, Welcome to the forums! Could you provide us with a reduced case example? It's very hard to troubleshoot blind. You speak of runing a loop for a video slide show but, I am not sure when this loop is being called, what else is happening at the same time, where you are setting your tweens. I also see a reference to the pixi plugin and so on. There are too many variables here, not enough for us to help you with. We suggest making a demo in CodePen but any online editor is fine as long as we can tinker with the code and see the bare minimum to reproduce your issue. In case you need help with CodePen:
  5. Dipscom

    Adding a new slide to THREE image transition

    I know that demo, I've read over its code and took it apart at some point in the past. It runs off shaders and as Carl has said, it's not for beginners. It was not designed to work out of the box by simply creating a new Slide. You will need to tinker in the code that informs the shader what to do as well as the calculations to break apart the images and which image to show. If this is your first attempt to work with ThreeJS, you will need to dive into shaders as well The Book Of Shaders is a great starting point even if it is an unfinished book.
  6. Dipscom

    SVG animation

    This affirmation is not correct, is it? You don't mean when you click twice in the same button. You mean when you click on a button A, then click to go back and then click once again on button A. Now, how is this new question any different from everything we have been discussing here? Go over your code, line by line, read and understand what each and every single line is doing. If you can't understand what the code is doing, go and take a course on basic JavaScript because you really need it. I will give you a hint to solve your issue: you need to remove ONE line from your code and it will work. I will not tell you which line it is.
  7. Dipscom

    SVG animation

    FreecodeCamp has a ton of material to get you from start to finish, not only on JavaScript but in general web dev plus more.
  8. Dipscom

    Continuous animation performance

    Hey Jp! You set the bottom to be 100vh, not the top. #pub-anim img{ position: absolute; bottom:100vh; } As far as performance goes, DOM element-wise, that's pretty much it. The only way to get more performance is to move those elements inside a <canvas> and run a ton of those calculations on the GPU. But, if you only going to have a dozen or so cats, you should be ok.
  9. Dipscom

    SVG animation

    I ask you, where in this code snippet are you changing the state?
  10. Dipscom

    Change the y value when animation play

    It doesn't continue from the wrong value, it does exactly what the code is telling it to do. You see, the first tween you create has no idea of what the second tween is doing so, once the second tween is done playing, the first one continues doing its thing as before. The values calculated in the first tween do not get altered by the second tween. The values on the second tween, however, are influenced by the first one. Refer to my first suggestion as to how to approach what you are trying.
  11. Dipscom

    Change the y value when animation play

    What is the effect that you are after? What do expect to see? You can't move the image without moving the mask, they're glued together. You can move the element you have inside your mask, and that will give you the impression your mask is moving. However, if you want the mask to stay in place and the image moving underneath it, you will have to wrap the image in a <g> element and move the image inside it. <svg width="360" height="233" version="1.2"> <defs> <mask id="maske"> <image width="100%" height="100%" xlink:href="http://motionlove.co.uk/banners/test/text_1Mask.png" /> </mask> </defs> <g mask="url(#maske)"> <image id="text1_img" width="100%" height="100%" xlink:href="http://wemedia.com/wp-content/uploads/2008/12/istock_dandelionlarge.jpg" /> </g> </svg>
  12. Dipscom

    Change the y value when animation play

    Well Baris, be prepared for a lot of studying if you are going to try and animate stuff inside the <defs> elements - There's all sort of potential bugs there. Another thing, you really should be able to just put a url into your posts without errors. Just try it, yes? The animation is behaving as expected. That is because you are applying a mask to an element with an id of "text1_img" and then moving the masked element. If you want to move the mask and not the masked image, you need to target what's inside your mask. Not the mask itself, mind you.
  13. Dipscom

    SVG animation

    If it's not stopping that's not the path you should be going down. You are trying to overcomplicate this. The answer is much simpler and has nothing to do with the actual timeline, it's the concept of state. Your animation has two states, doesn't it? One is open the other is closed. Now, refer back to what PointC has explained and the code that is there as an example. What do you need to write in your onReverseComplete function so that your state changes? What in the doCoolStuff() function prevents the timeline to be created repeatedly?
  14. Dipscom

    Change the y value when animation play

    Thanks for understanding Baris. We do try and help everyone here as much as we can.
  15. Dipscom

    Change the y value when animation play

    Eh? Sorry but you seem to be contradicting yourself here. Your initial question and the title of this thread is about moving an element on Y, not about SVG. I hope you can understand that we have limited resources here and thus, must keep this forums GSAP focused or we will be overwhelmed. We can't offer troubleshooting general SVG, JavaScript issues. We do, of course, help out as much as we can and share as much knowledge as we have. In your case you have nearly 100 lines of HTML code, close to 500 lines of CSS and over 200 lines of JavaScript. That's definitely not a reduced case example. Places like StackOverflow is where you will get help with more generic questions as to why your SVG is not displaying.