Jump to content
GreenSock

Dipscom last won the day on July 19 2019

Dipscom had the most liked content!

Dipscom

Moderators
  • Posts

    1,508
  • Joined

  • Last visited

  • Days Won

    58

Everything posted by Dipscom

  1. Interesting, Jack. I've wondered in the past what is going to happen when the WAAPI become more widespread. I also wondered if they'd be 'inspired' by GSAP on how it structures the sequential lines of code for timelines.
  2. Looks like I placed my two cents on the duplicate thread. Have a look at my comment there - I have a feeling it will be relevant to what the two of you are discussing.
  3. Just throwing this in: I didn't give too much thought on the issue but this works in a way. Note that you will need to add in a step to normalise the 360 degrees into a 0.0 - 1.0 range if you need to support degrees as an input. Also note that I'm using the ModifiersPlugin - sorry about lumping it in, I'm being lazy here. ;P Welcome to the forums @Garrettlynch!
  4. Hello @DD77! The centering of the image in your first section is all CSS related. It has nothing to do with GSAP. We usually say we have to focus on GSAP only related problems here due to sheer amount of demand versus resources available. Having said that, I won't let you hang out to dry leaving you without some directions. Firstly, a word of advice, simplify what you are trying to do to the simplest possible parameters, then, start adding complexity after you deal with the issues. In this case, I would first make one pen centering your image responsively, Then, I'd make it so, there are several sections, only after I'd consider animating it. And all of that before trying to trigger those animations with user click/tap. Once I got all of that working correctly and responsively, I'd bring in the scrolling hijacking. Just sayin'... Now, your issue with the image is because you've added a '.full-screen' class to the main tag and then, reused it in the section tags. Those two tags are doing different jobs. They should not share classes because then, you're mixing roles. When looking at your '.full-screen' class there's a load of things going on there. Like, it being 500vw wide... That's clearly excessive. And if you remember your sections all have the same class, that means all your sections will be 5 times the width of the screen... I have a feeling you're trying to patch things up which in turn, is creating more confusion. If you're using flex, there's a magical way to center things perfectly, see bellow. main { display: flex; width: 100%; /* or whatever amount you might need */ height: 100%; /* or whatever amount you might need */ } section { /* or whatever element is the child */ margin: auto; /* here be magic! */ } Have a read over this guide, it will give you several practical examples as well as explaining how the flexbox properties work: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Happy Twee.... Erm... CSSing? ps: Oh mighty CODEGOD please do not strike me for talking of CSS in GSAP holyland...
  5. Hi @HavasDK, Would you happen to have a reduced code example of the issue you are experiencing? It will help us a lot when trying to troubleshoot what is going on. Thanks!
  6. In the end, I was not allowed to bring my good looks and advanced plugins into the project. So I was forced to write my own scrambling animation function to conform with the legality here and the requested animation. At some point, I hope to spend some time and make it a little prettier. Roll over the text for some action (and wait a few seconds)
  7. There is never jest. I always write from the depths of my heart with complete, utter, unflappable honesty.
  8. I'm not aware of anybody making rivers of money out of online education. It's more about the nice feeling and flexibility that theoretically comes from it. I still sell my soul making banners so, that's the only place I know there's money. No idea where else it is hidden. Except some React gold-mines but they are still rumors to me, I've never seen one. You have my number, let me know when the minion position opens up. Given your idea of decent money, I'll expect some decent crumbs for the minions. @Sahil - You misunderstand me. It is not that there's stuff that I hate to learn. My frustration comes from not having the time to learn all this stuff that's out in the world. Having to be an adult, feed me, clothe me is always in my way. :\
  9. You don't need to use fancy words to say 'collate'... I'll be happy to lend you a hand finding stuff on the forums during the holiday break. But, you can always start with just what's going on right now. This thread is a good enough start as any. The moment you start writing, people will start asking for particular topics. Soon enough you will have more potential posts than you can keep up writing. As it would be nobody's surprise - I have it on my 'to-do at some point' list. Get yourself a Patreon account, a youtube channel and people will start throwing money at you. Then, you can hire me to be your minion. That way I'm sure to learn something. Blake for President!
  10. Yeah Blake, you don't need to concern yourself with what to write about. You've already wrote about half a dozen posts within these forums, all you need to do is collect them into a blog. Then, when you are done with that, there will be a dozen other questions here already dying to be answered by a blog post. Another thing to convert into a blog post is anything that is asked three times or more. That'll save a ton of time - we could even talk about having a shared repo or something to keep them all updated and relevant to the latest trends.
  11. You! You just led me astray! I curse you @OSUblake! I was so happy in my ignorance... Now, I have to learn trigonometry, algebra, PIXI, Canvas, PaperJS, PWAs and progressive enhancement. Not to mention my previous goals of THREE and Blender3D. THE CURSE OF THE BOWEN! Beware, travelers!
  12. Cheers for the clarification Carl. I've passed this on to the people who make a decision. We shall see what the say later on.
  13. I'm looking at the animation required here and it might be just about particular enough to warrant a little function for itself.
  14. @Carl - I am working in a large business this week on a short contract, tasked with creating a little animation that is perfectly suited for the ScrambleText plugin but the business here does not have a license for the premium plugins. My question is: Given that I have a license, can I use the premium plugin? The finance team here already said no and the ones in charge of acquiring such licenses are already telling me to write an equivalent function to do the same thing. My understanding is that if the use of the plugin is limited to this one and only campaign, I can use it. Am I correct in this or not?
  15. Much better, isn't it, @DD77? And you have removed all the excess code, which made it much easier for me to go over the code. The only things I would mention is that you don't need to .set() the display to "none" and I would remove the 0.6 second delay from the animation - You want the animation to start immediately once the click is registered. To level up, I would challenge you to change the code to implement the scaling technique, rather than the height to improve the smoothness and performance of your animation. Well done.
  16. Hey @DD77! Nice one, you're getting there. Did you go over the points @OSUblake made? Did you get it all? The probable reason your content is jumping when you toggle the expand you are going from a height of '0' to 'auto'.
  17. Maybe I am trying to do exactly that. Maybe I'm just tired of it all. I get next to no time to GSAP anymore. Life's got complicated and I don't like it. But you have foiled my plans. I now need to find another way to create a singularity. Who knows? I might be reborn in this new universe with actual mathematical knowledge.
  18. Hi @DD77, I'm not totally sure what is the behaviour that you are expecting and you seem to have a lot of code for what appears to be a expand/collapse logic. I think your issue lies in the fact that you are using .from() tweens. They can be quite tricky to work with if you are not sure how they behave. From you title, you want this to be responsive and I don't think animating the height of the element will work. Try using scaleY for that. What you want to do in this case is to have a .fromTo() call instead of just a .from(). You can also scale the children in the opposite direction in order to keep them from deforming. Bellow is a quick example how you could go about it: TweenMax.fromTo(".Tile.is-expanded .Tile-flyout", 0.8, { scaleY:0 , autoAlpha:0, ease: Linear.easeNone }, {scaleY:1, autoAlpha:1}); TweenMax.fromTo(".Tile.is-expanded .Tile-flyout > *", 0.8, { scaleY:2, ease: Linear.easeNone }, {scaleY:1}); I didn't spend the time to work out the scaling correctly but I think it will give you a good idea. This way, your animation will be more performant as well, by the way.
×