Dipscom last won the day on January 12

Dipscom had the most liked content!

Dipscom

Moderators
  • Content count

    804
  • Joined

  • Last visited

  • Days Won

    31

Dipscom last won the day on January 12

Dipscom had the most liked content!

Community Reputation

1,236 Excellent

About Dipscom

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling
  • Location
    London

Recent Profile Visitors

5,392 profile views
  1. That is one heavy thumb. Sorry about that. So far you have managed to digest all the little steps we have been taking. It does look a lot of work and a big round about way of doing things but, with experience, half of it you will do it in your head as soon as you start thinking about the problem to be solved and the other half will be come more of a pattern you don't even think about. Just make sure you don't set yourself too comfortable in this patterns as to prevent you from seeing new, different patterns or resist ideas from others. You have seen the benefits of grouping repetitive code into functions and how you can make it affect different elements and return different behaviours with some function arguments. You were able to extend the code from affecting one element/group into the other two elements/groups. Now we need to step out a little and put the last piece of logic to connect the three points and their slides so that the others know when you are interacting with each of them. One last thing. There isn't just one way of achieving what you set out to do. And I am not giving you the ONE BEST WAY, just A way. Or the one I could think of at the moment. There will be other. There might even be someone else here who will have a more elegant alternative and, hopefully, will share with us. Hoh, hum... My original idea did not work. It breaks. Let me go back to the drawing board and try again. *shame*, *shame*, *shame*.
  2. Under the oppressive thumb of real life and work. I shall be back asap with our latest instalment.
  3. If you thought things were getting complicated... You haven't seen it all yet. Don't rip your hair out if you can't make this work with all three dots. Do try but just focus one what this step is introducing. In all honesty, I haven't thought the next step completely through so, there's a chance the code might change when we try to have all slides opening and closing individually.
  4. I haven't quite grasped what Carl has said but I am confident it will eventually sink in. @PointC more coffee to you, sir. Whatever day you may be having, coffee is the solution. Thanks Jack. I shall cheat like you are suggesting just for the sake of doing so (as mentioned before, I had it working with the for loop).
  5. I am using that, yes. Just praying for some godly action here. But, now I have to transform a HTMLCollection into a real array in order to manipulate it to my hearts content. At least it warms my belly to know I have taken the path mighty demigod @OSUblake has shown. Take pity on this ant oh mighties!
  6. Oh mighty Powers That Be! Descend upon this mortal and enlighten my soul! I pray, can one beg to be allowed to use mighty function-based values with the delay parameter?
  7. You say it's getting complicated and yet says it's easy. Are you developing your superpowers yet? As for the opacity. Look at you making maverick moves... For the situation at hand, using opacity is fine however, we always recommend using autoAlpha. Have a read at the docs for the detailed description. I'll be back later for our last step. Well done on your leveling up so far.
  8. Nothing to be worried about. The weekend is when we are meant to go out into the real world and breathe fresh air. Or so I am told.
  9. By the end of this, you'll have Advanced GSAP Powers(c)! I'm happy to hear that things are making sense and you can see the benefits of setting things up more modularly. Onto the next step: Having the hidden items show automatically. This is pretty much more of the same as we've been doing so far. Create a function that will generate the animation you need in a manner that you can reuse after. But read slowly as we are now adding logic to handle the mouse interaction.
  10. Hello! Making good progress, right? Thank you for the wishes for a happy Friday. Unfortunately, food poisoning did ruin the day. Anyhow, I'm able to walk away from the toilet now so, let's get cracking. dot1_path and bez appear to be the same thing because we are still only working with one dot and a single path to use as a bezier. If you were to have different paths to use as beziers in different dots, then, you would probably see the difference. In line 18, bez refers to bez in line 11, the function argument. And that value will be whatever path you pass on when you invoke the said function. That way, the function is flexible and can be used with different paths for bezier curves, not just dot1_path. Your dot1_pulse_idle timeline does not play because you are not instantiating a new TimelineMax/Lite when invoking tl_pulse(). You need to declare the var tl = new TimelineLite() inside the functions you are using in order to create new timelines (it's to do with JS and Scope. That's another rabbit hole we don't want to go down just yet) otherwise, you are just adding more tweens to the singe tl timeline you created right at the top. So, it makes perfect sense for all animation to stop when you hover over. Since you want the pulse to continue animating even on mouse over, you are correct, we need a different tween/timeline to control that. We can revert back to using Tweens because we are back to controlling a single element at a time.
  11. Check their examples: http://scrollmagic.io/examples/index.html This one is the GSAP specific: http://scrollmagic.io/examples/basic/simple_tweening.html
  12. Exactly. Regarding your question in the pen: If you look at your dots, their topmost element are: <svg class="dot dot--placement1 js-dot-one" width="85" height="85" viewBox="5 5 92 92"> <svg class="dot dot--placement2 js-dot-two" width="85" height="85" viewBox="5 5 92 92"> <svg class="dot dot--placement3 js-dot-three" width="85" height="85" viewBox="5 5 92 92"> In another words, they are the same. And the path that you are using as a guide is also the same in all your dots. When you use MorphSVGPlugin.pathDataToBezier, it converts the path into a bezier relative to the target SVG thus, they're all the same. So, you can just use that one if you don't mind them having the same movement. There are other little things you can change to tidy the SVG a bit more but I'll leave for another day. Now let's move on to step 2. There are very small changes from the previous step into this one but they are quite important. See if you can work it out:
  13. Yeah. It shows an little error message saying "something went wrong, try again". Even with another half a dozen tries, it still does not show.
  14. If that's the case I am being unfairly handicapped as it does not happen to me. Of all my attempts, only one has worked.
  15. Edge Animate has been discontinued and you will have a hard time finding many people investing their time on tools for it. However, in the Banner Animation section of the forums, there are a few who have experience with it and some that still work with it. Maybe someone can help you there.