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. It seems this is more of a ScrollMagic question, rather than a GreenSock one. (I hope the mighty CODE-GOD will not smite me from afar when I press "post" - forgive me oh mighty!) Why is always a hard question to answer. There might be something else wrong on your code. Unless we can reproduce the error, we cannot really help. I have amended the pen I forked from you to something that, I think, resembles your question. It works fine for me.
  2. Is this what you are after? http://codepen.io/dipscom/pen/bEWGjz The main thing I think you were not aware of is that you need a plugin in order to have ScrollMagic and GreenSock playing together. The reason all your animation was playing in one go was that you were targeting the class name so, GSAP was simply picking everything at the same time and placing it together. I say you need to target the elements you want by ID rather than class. If you want different bits of animation to run at different times, you have to make different timelines. I do not know enough of ScrollMagic to say if there is a way to call functions or not as you scroll along (if you know and can, you can make one long timeline, have it pause at the places you need and then, unpause them by calling a function). I wish I had more hours in the day to go over all those things... I guess ScrollMagic is, too, going to go to my "to check one day" list... Hope this will solve your issue.
  3. Cool Oxie! On the case (just need to have a look at ScrollMagic a bit), hopefully the others are too busy with something ultra awesome and I can get to the bottom of this before one of them oust me.
  4. I see now where the reverse:false comes from - ScrollMagic. I haven't worked with it myself, hence why it didn't click immediately. Do you think you could setup a simple example Pen? It makes debugging a lot easier than guessing what could be wrong. Like I said, I haven't worked with ScrollMagic so, wouldn't know from the top of my head how it behaves. Carl has a brilliant explanation video and post here. It is quite fun (for me) to hunt down bugs and misbehaviours from code. I would be quite happy to have a look at your pen.
  5. Hi Oxi, Welcome to the forums! For your first question, have a read at Carl's explanation in this post: http://greensock.com/forums/topic/12361-using-functions-to-build-a-timeline/ As for the second question, I am not sure I understand correctly what you are asking. Reverse:false, uh? Where? If you don't want the animations to play immediately, just add: {paused:true} to your timeline's constructor object.
  6. Riiight. That is a rather more complicated scenario than: "clear class from timeline". I say there is a lot more that you will need to grasp in order to pull it all. You probably will be better off using a 2D renderer as well if you are looking into making a game. I will follow OSUblake and recommend PIXI.js - for no other reason than, he says it's good. So, I believe him. Your requirement has given me something to focus on, which I am very grateful for. See the bellow codePen. I made it based on your previous questions and this image. Hopefully this is something you can work with. Let me know if you have any problems with it. I will make another one another time with a bit more interactivity to it. I shall post it here when done. http://codepen.io/dipscom/pen/GorOyw?editors=001 Speaking of OBUblake, shotout for him as his pen was the base for mine and for being an all-round good sport and great source of knowledge.
  7. Hi Stefffen Wenzel, welcome to the forums, Are you getting 50% CPU usage constantly while testing? I had a quick look here and it does spike to 50% on load and all but after it goes down to 10-15%. Have a think of what else could be running in Firefox at the same time (extensions, plugins, etc). Have you tried running it in privacy mode? With all extras disabled? Also, if you only get this unreasonable level of CPU usage, I would imagine the issue is with Firefox, not with your animation or GSAP itself.
  8. Ok, well, again, I am not sure what is it that you are after. There are tons of ways of achieving a check against a position - the trouble is, what situation are we considering here? Where is this <hr> tag? Is it fixed? Does it move around? The easiest way is to simply have an if() statement to check the red box total progress against the tween then, move or not move depending on it. But, the setup you have in mind might be different. That's why the codePen is super helpful. Because it allows us to troubleshoot your code. How about you update the codePen you made with the things you want to achieve?
  9. I see. Ok, I have amended the pen I forked from you. Have a look to see if that's what you were expecting. My opinion is that you might be overcomplicating things here a bit. Unless you are sequencing things, you don't really need TimelineMax. You can just assign a tween to each of the objects and kill them as needed (which is partially what I did here). If I were to approach this, I would write a function to create the individual tweens and another one that kills it. That way, you could start and stop the movement as needed.
  10. Is this what you are after? http://codepen.io/dipscom/pen/RrKVRo?editors=001 Or what you want is to remove the clicked element from the looping timeline?
  11. Hi kingproo, Welcome to the forums! I see you made a codePen with a minimal case scenario. I am just having a little difficulty understanding what is is that you are asking. I tested your animation and all buttons seem to work. I can also imagine this is not exactly what you want as the animation is a bit strange. If you could elaborate a bit more on what is it that you are trying to achieve, I am more than happy to try to help.
  12. Hi Cartamundi, I am not sure I understand what you are asking here. I can see you banner and the animations but I fail to grasp what is it that you want help with. One thing I would say, though, is: it would be more beneficial for you if you opened a new thread for critique on you banner if that is what you are after. That way, it makes it easier for people to find stuff in the forums. Regarding "how to make better" I am assuming you mean best practices. Well, I have some personal opinions that I put in writing in codePen, maybe you might agree with me on a thing or two. The link is: http://codepen.io/dipscom/posts/
  13. Dipscom

    ePub books

    Ah the power of technology: Hi JohnWelch chào mừng đến với diễn đàn! Tôi xin lỗi. Google dịch đã không làm một công việc tốt. Tôi không hiểu câu hỏi của bạn.
  14. I saw that as well. They look pretty cool.
  15. Hello again Bundy, I got really interested in your idea of animating the pattern asset before applying it so, I went and did some digging. It seems borderline possible, it does need a bit of thinking and some slightly deep knowledge of the viewport. Here were my steps: I was made aware of a bug in Firefox when reading this article from Carl: http://greensock.com/svg-tips - Scroll all the way down to the gotchas. Then I read this article slowly to understand the transforms a bit better: https://css-tricks.com/transforms-on-svg-elements/ While reading I was also tinkering with the pen you provided... And doing some searches for more info on the SVG bits. Based on the tips from Ana Tudor (the previous link) I went after more info on the viewBox and saw that you can have a viewBox for the pattern as well as the SVG. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox Putting it all together, I got something working in Chrome, Safari and Firefox (on a Mac). I have checked it quickly and it does not seem to work in IE. That's something to explore later. Right now, I am not next to my home pc so, can't really troubleshoot it. But, I hope this helps you a bit. It certainly was very interesting for me to hunt this thing down. Here's my stab at your idea: http://s.codepen.io/dipscom/debug/zrBNLM ------ Edit ------ And once again Microsoft seem to be the villain of the story. Both of their browsers seem not to respect the negative viewBox definitions if using in the pattern element. I guess for now, that's as far as we can go. Unless someone knows any more about how IE and Edge parse the viewBox. From what I can gather here, it simply ignores negative minX and minY and clips everything.
  16. Hello Bundy, Welcome to the forums! I am afraid you will have to content yourself with little me while the masters have their two and a half hour sleep. Looking at your pen (nice idea, by the way), I can tell you that GSAP is actually tweening the "patternChild" as expected. What is not happening in firefox is that the transform part of the pattern is not updating. The fill is. I am sure Jonathan, may have more info as to why that is the case. I know FIrefox has some issues with SVG and filters, for example but I have not delved deep into the pattern element as of yet. To me this is not a GSAP issue but, as you said yourself, a browser issue.
  17. You are indeed in the right place. You will find very talented people lurking around indeed. And most of them will have a codePen account that will knock your socks (green or not) off. I tend to have a browse around barefoot, you know. Now I just need to find a way to sabotage some of the other guys computers or hope they are a bit too busy currently.
  18. There are so many things that could be potentially going wrong here that not even a codePen example would suffice. I am not very familiar with ESLint but, I do work with Gulp and other linting preprocessor. Maybe ESLint doesn't like greensock because it is a strict version or has a rule that requires you to declare 'var' no matter what? Have you tried disabling ESLint to see if it compiles and things work?
  19. Hi ChriStyle, welcome to the forums! If you are after someone who's amazing at using GSAP, I would recommend the GSAP community forums. *wink*, *wink*. It will be a matter of just having a look at the members post there and approaching someone. Your description of the project makes it sound very interesting, I am sure you will find buckets of people interested (There's a guy who goes by Dipscom there, he seems rather interested in animation projects). I would just ask you to elabore a bit more on your requirements: are you looking for someone to work at your office, remotely? Is this person to lead the project/do it all him/her/self? Work as part of a team? And so on. Hopeful you will find what you're looking for.
  20. @PointC, your post was shorter... Nonetheless, congratulations. I share you plight.
  21. You're still not admitting you've sold it or not... :3
  22. Wow, there's quite a few of us lurking around at this time of the day... Bet we were all writing at the same time. Jonathan and Tahir's posts show up as published at the exact same time to me...
  23. Hi anu, welcome to the foruns! Having something we can see the error and a reduced case scenario makes it easier for the people here to help you track down and fix whatever might be wrong. Have a read at this post from Carl where he explains how to make a little code pen demo. Regarding your question: It should work. Why it doesn't work could be for a number of reasons. And because we can't see the error, we can't tell you what is wrong. However, on your second loop, you really should convert name into a string and add the # to it so that TweenLite knows your are looking for an id name. http://codepen.io/dipscom/pen/JGXdrv