Jump to content

Dipscom last won the day on July 19 2019

Dipscom had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Dipscom

  1. Hi a.joshi85, Welcome to the forums! All you have to do there is to break each letter of the text you want to animate into an individual tag element, add your desired animation and trigger it with the 'mouseover' event. You can either, use GSAP's SplitText, write your own function to add the spans or divs as necessary in your text or, painstainkly add the span and div tags by hand (as I have done in the example). https://codepen.io/dipscom/pen/6fec6d0b125fe69b186e9b139ccbc01c
  2. I wouldn't say the blame lie on developers. There will always be the ones who care and the ones who don't. The blame, in my view, is in human nature. The people who don't care are usually far more numerous than the ones who do and unless the ones that care make a ton of noise, crap just builds up in the background until it starts to stink. Then, someone comes up with a *revolutionary* ideas and techs away the problem. Oh.
  3. Hi InspireUX, Welcome to the forums! Are you asking about general web-dev tutorials? FreeCodeCamp is a rather good and compreensive site full of tutorials. There are a ton of other ones that are free/paid or free with a paid option: https://www.codecademy.com/ https://www.udacity.com/ https://www.khanacademy.org/computing https://wesbos.com/ And I could go on... Youtube is also crammed with people showing how to's and the such.
  4. Don't even know what you mean by scroll up effect... There are so many things these days triggered by scrolling around. There are a few threads here in the forums talking about scrolljacking and scroll-triggered effects. Have a quick search here and maybe something will show up. As for copying the websites, make sure you are taking small bites at it. Otherwise the frustration of understanding something too complex might put you off.
  5. Some of the things that help me: 1) Answering questions in online forums - Like this one. Specially the questions that I have no idea what the person is asking for. There is a ton of people trying to achieve a ton of things that you (or I) don't even consider trying. That saves the time of coming up with such challenges. 2) Picking up ONE effect on a site that I like and ripping it off completely. Reverse engineering stuff is super time-consuming, hard but it pays off. At the start you won't be able to work much out but after a while you get better at it. 3) Reading other people's explanations on performance, concepts, effects. Also, reading on stuff of other disciplines, general animation, graphic design, light/colour, math, trigonometry, physics simulation, user behaviour and psicology. 4) Have someone who's got no clue about the web's limitation ask you to create something. The more unreasonable/demanding the better. This is the worst of all suggestions because it usually comes with a ton of stress and is bad for your health. But, there is no such thing as a 'special secret place' where you can learn all the amazing techniques that are out there. There are several online courses and books out there teaching a plethora of stuff. Out of the suggestions above, the answering questions in forums is the best to start with. You don't even need to post your answer if you are not confident or if someone else has already done so but, just by coming up with your own version of that will be a great way to practice your knowledege.
  6. The Beef I personally have with AMP is two: 1) Is gatekeeping. No matter how you dress it, it is. Ultimately, Google has (possibly) seen how profitable it is to have a walled garden (Facebook) and is going after a similar thing without admiting it. 2) AMP, at the end of the day in the most part, is nothing more than a super strick environment. By controlling the environment, Google can remove all the bloat that third parties inject on whatever page/ad is being served. If one was to strip out the ads and tracking of their sites and do a good job of only serving what's needed to display the page, AMP delivers no significant benefit.
  7. I don't know this Swiper, never used. I am supposing it is what you are using to animate your sliders. If that's the case, it's the Swiper responsibility to animate your content smoothly. Now, if you were to replicate what is happening in the site you have referenced, you would have to calculate the delta (movement of) the mouse (or touch event), translate that to a fraction of the total of the movement and move your slides along it. Or, you would get that same delta and convert that into a "force" to be applied to the vertical movement and thus use physics simulation to generate the drag and acceleration of the vertical movement. I'm sorry if it sounds complicated but the creation of natural, smooth, movement is that involved.
  8. Dipscom


    Hi Digital Nation, It's very hard for us to guess what could be wrong without the code in context. If you could just create your test on a editable online tool like, CodePen, we will be able to point you to a solution. If you haven't read, here's a handy guide on creating a CodePen demo:
  9. Looks like rubber duck saves the day again...
  10. You certainly appear to have unearthed something with that deep debug dive. I know there was a thread here not too long ago regarding floating point error - Can't remember with it was with you or someone else but, it could be something along those lines. What happens if you turn off the round props? I would expect it to make things worse. Is this width fixed? Do you know? If that is, how about setting boundaries to those X positions? As in, whenever looping, the item has to sit on a position that is based on the previous sibling or on a index times the section width? Still, just throwing wild ideas here until @GreenSock comes by to say something about this potential miscalculation.
  11. On my machine here, I don't get that line appearing much. Actually, I only saw it once. I'm not sure what could be your setup but it really smells like it's a sub-pixel misalignment to me. Like, the div on the left is at, say, 12.4pixels and the div on the right is at 13.6pixels but the browser rounds that to 12pixels for one and 14pixels for the other. Is your monitor a high dpi one? If it is, do you have one with a lower dpi? See if that happens more on a lower dpi. What is the duration of each tick? Have you got other stuff running on the thread that might bump the tick to a different frame? How long does those calls in your profiled event take? I mean, I am shooting in the dark here, really...
  12. Hey Roland, The codePen doesn't really reflect your setup, the issue you're refering to here seems to relate to when you are stopping a drag and immediatelly starting a tween. Looking at the linked example where you report the line, I did see the vertical line but the code there is very dense and I can't spend the time trying to read over it. My guess is that when your code is going from the drag to the tween, somewhere there, sometimes, the different divs don't align perfectly and you end up with a gap between them. Did you say you are only tweening the progress of the timeline when dragging around?
  13. Happy to help! Learn much and come back to teach others That is also a super nice feeling.
  14. Hi @oxhsun, Now things are getting much clearer. And I have already some suggestions. First I have to make some assumptions. One is that you want several boxes. In your example, you have a single box so, you need to create many more boxes otherwise, there is no way to have "all the red boxes" show up at the same time. (Technically, you have all the red boxes showing up as is, given that you have a single box in your HTML). With that in mind. You have to your your for loop to duplicate the current red box you have and then, make sure all duplicated boxes go somewhere different. Note that I changed your code a bit as it's more performant to animate transform properties (x,y) than it is to animate left and top CSS properties. Does that help?
  15. Is there any chance you can put a reduced code example? I'm stilll fuzzy on what is the end result that you are trying to achive. This is a handy explanation in case you haven't seen: Is '.stoneDestination' one element? Several elements? Who is 'them' in the above sentence? I am pretty sure we can work this out, we just need to get the correct picture you're trying to paint here.
  16. Hi oxhsun, Welcome to the forums! I am afraid I do not understand what is it that you are asking. You have a for loop, where you setting a bunch of positions for your ".stoneDestination". And then you want it to do what? I can't make sense of the bellow:
  17. Hi Sameer, Welcome to the forums. To achieve what you are after what you need to do is make sure that none of the transforms applied to your tweened element are left at the end of the animation. For that you want to use clearProps - have a read in the CSSPlugin documentation. Another thing you want to do to make your life easier is to animate .from(), rather than .to(). Working backwards with your animation will help you as you will know where the element end as soon as you start working. Rather than creating the whole thing and, at the end, trying to make sure it lines up with your design. Happy Tweening!
  18. For the premium plugins, you will need to be a ClubGreenSock member, yes. You won't need a Business green if you are going to be using them for ads. And the premium plugins will not be on CDNs, they will have to be added to your own JS payload. Note that many plugins do not need a paid Club membership.
  19. Sometimes it's like playing charade, hard mode on....
  20. There are some bits to go on with here. First I think you should stop referring to those tweens as 'animation'. You don't want an animation, there is no animation. There's the placement of the annotation and whether it is visible or not. Another point to raise: This 0.04s tween here. In the above scenario, you will have a flickering annotation if you are hiding it as soon as the tween is complete. As, it will always be tweening from opacity 0 to 1 and no matter what you do, probably 0.01s of the 0.04s the element will have an opacity of 0. I really can't see how that would happen. Inside the callback of the onComplete, how could you possibly know the status 5 frames in the future? Once the callback fires, the future has not yet arrived. Maybe, what you want to do is have the server send down a message to hide the annotation. It really feels to me it will be a much easier solution to implement than predicting the future... You json payload, that you say is already constantly arriving from the server would have two versions, one being "show annotation id whatever", another "hide annotation id whatever" or even, if you follow our suggestion of reusing the same DOM element to hold all annotations: "hide whatever is on screen".
  21. I would say that is well cool. Well done. Badly.
  22. I haven't worked or tried Anime.js so I am not sure how it is structured. It does look like it comes in already as a chainable timeline by default. So, I guess, you probably are looking at building a timeline of .to() tweens, instead of .fromTo(). I'm afraid you're getting it wrong. You'll need a couple of simple .to() commands. 1. to z index * 8 + 8 2. to z index * 20 + 20 Then, depending how you want the reverse to happen, you just reverse that timeline or you create another one with a different animation and play that.
  23. Nice one mate. Keep at it and there's no telling how far you'll go.
  24. I would say you are going about it backwards. The two libraries are not a mirror of each other. As you have seen, they do have similar capabilities but build in a different manner. For example, both of them have the ability to have an easing curve. In the Anime case, you have a easeFrom and a easeTo in your example. While GSAP gives you a custom easing curve. Anime's duration is split into two sections, while GSAP is a single duration for the fromTo tween and probably a few more things. So, in order to be able to port it correctly, you have to do far more than just copy over the values from Anime to GSAP. You have to completely digest what each command is doing and then, yourself, translate that into the appropriate library API commands. Example: The GSAP version of the duration is 0.9 as it is seconds-base. The curve of the easing will be a combination of the points [0.42,0,1,1] and [0.2,1,0.3,1] but they need to be spread in the ratio of 2/7ths as is in the duration from Anime. Your GSAP port has a jerk because you have a .fromTo() tween that has from values that differ from the values the element is currently on at the start of the tweens. As a super simple example: If you look at the very first item of the stack, index 0, it is sitting at z: 0 before the interaction. As soon as the user interacts, the from part of the .fromTo() says it has to have a z value of 8 ( 8 = 0*8 + 8). There's your jump. The same thing happens with the rotation and the mouse out event. Does that help?