Jump to content
Search Community

Dipscom last won the day on July 21 2022

Dipscom had the most liked content!

Dipscom

Moderators

  • Posts

    1,640

  • Joined

  • Last visited

  • Days Won

    62

 Content Type 

Everything posted by Dipscom

44
45
46
...
65
Page 45 of 65  
  1. Dipscom
    Using it alongside CSS transitions?
  2. Dipscom
    Hi single0speed, As as I know there's no problem in offering little paid gigs here. This is not a bid/hire forum but there's the odd offer/request for help that bubbles up and I never seen anyone's being told off for that. Hum... I don't think it's a GSAP question, it feels more like a general structure sort of question. I would be a dozen other questions before even considering giving you suggestion, some of them would even be about you and your skill set. Having said that, I am on the lookout for some small scale pet project. I would be willing to try and help you if I can. Why don't you send me a private message with some contact detail?
  3. Dipscom
    Like this Ryan? var NUM6Timeline = new TimelineMax(); NUM6Timeline.staggerFrom(".SET6>g", 0.7, { opacity:0,}, 0.15) .from(".top6", 2.4, {x: '-22%', y: '22%', opacity:1, },0.0) .from(".shd6", 6, { opacity:0}, 0) .from(".sticker", 1, {transformOrigin:"50% 50%", scale:0, opacity:0, ease:Back.easeOut },2.2); var tl = new TimelineMax({repeat:-1, yoyo:true}) tl.to(NUM6Timeline, 2.5, {progress:1, ease:Power2.easeIn});
  4. Dipscom
    Hello Roli, Welcome to the forums! You said it yourself, the animation is infinite. It has no end. Because you are using a timeline, the second tween is waiting for a previous tween to finish, which will never happen so, it never starts. The same will happen to the third one. You can do one of two things: 1) Have a tween for each of your elements: TweenMax.to(red, 3, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }); 2) Set the elements on your timeline to start at absolute times, not relative: tl .to(red, 3, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }) .to(green, 1, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }, 0.15) .from(brown, 3.5, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }, 0.3);
  5. Dipscom
    Regarding this: It will be because in your SVG code, you are overriding the .st0 class with white. Look at lines 6 and 15 6: .st0{fill:#D40006;stroke:#fff;stroke-miterlimit:10;} 15: .st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
  6. Dipscom
    Hi single0speed, Welcome to the forums! I am not sure what you mean by "advanced tabs". To me it sounds like your question is more related to UX flow and how to implement it than to animating something. There's very limited resources by the GSAP guys for support, it's not feasible to be troubleshooting everything, they have to focus on the GSAP API and related questions. Do you think you could setup a basic example of what you are looking to achieve, it's ok if it's not fully functional but it might help us understand what you are after and how GSAP can help you.
  7. Dipscom
    @philip_b you can be even shorter in your onEnter: function onEnter(e){ tls[e.currentTarget.id].pause(0); } It's because I prefer vanilla ice cream over chocolate. Only mint choc chips tops that. (And the fact that I never had to use jQuery for any of my work. Whenever I fork a pen that uses it, I'm really just winging it.) Today I have learned that's a super convenient way to create an object to hold a bunch o tweens and/or timelines and access them using bracket notation. If it wasn't for philip_b's question and code I'd never thought of it.
  8. Dipscom
    Let us know if the article somnamblst has linked solves your question. As for the video, the link I posted earlier on this thread will have information on how to control the video dynamically. You will have to check with the adPlatform if they have their own methods on top of the standard html video methods.
  9. Dipscom
    It's bedtime for me here, let's see if someone who has experience with Animate will chime in, otherwise, I'll whip something up as an example at some point tomorrow. Does that sound ok?
  10. Dipscom
    How about this cigar? http://codepen.io/dipscom/pen/ObxWee?editors=0010 I don't know jQuery so, you will have to adapt. But, you could just use that code as it will work anyway. I also would repeat the bit where I said you shouldn't put yourself down so much. I've actually learnt a new trick by reading your code and responding to this thread. So, take it as we're all helping each other at bits we are all bad at.
  11. Dipscom
    More than happy to help. Won't be able to give you a hand with Animate + GS but there are others here that have plenty of experience with it, they'll know the ins and outs. First things first: Will you be working with Animate? And What's the adPlatform this is going to be served in?
  12. Dipscom
    Exactly, a zero duration tween is just like a flick of a switch, therefore there is nothing to stagger. It does causes a lot of headaches to a lot of people until they realize that.
  13. Dipscom
    Hi AlexeyBoldin, Welcome to the forums! May I ask you, and forgive me if I sound dumb, but what is your question? What are you stuck in? You can set your ad size to be percentage-base and limit it to the amounts that are required with min/max-width, min/max-height. Then, position your elements relative to the size of the banner as well as their sizes. Video, well, that's a whole different kettle of fish depending on the adPlatform that this ad is going. You can get the general usage of video in w3schools.com for example. Does that help?
  14. Dipscom
    I am so confused here... Are you trying to overwrite a video player's custom z-index?
  15. Dipscom
    Hum... Nothing springs to mind right now. I'll have a think if something pops into my mind, I'll be sure to let you know. Maybe someone else will have a solution or someone from the GSAP team will help out.
  16. Dipscom
    Hello , You nearly got it. See the amended bellow: TweenMax.staggerFrom( "polygon", 2, { y: function(){ return -620*Math.random() }, x: function() { return 420*Math.random() }, scale:0.5, opacity:0, delay:0.5, ease:Elastic.easeOut, force3D:true }, 0.01 ); Do have in mind that SVG is not the best option when you start moving a ton of elements in one go. You might see this pen hang right at the start. Consider using canvas for this or WebGL... Even DOM elements will give you a better performance than SVG in this case. Mainly because SVG is not currently offloaded to the GPU.
  17. Dipscom
    Hi cleveradvertising, Can you setup a little example of what you are experiencing? I don't quite understand what you are trying to achieve. Thanks.
  18. Dipscom
    Hi philip_b, There's no need to put yourself down mate, we're all at different stages in different spheres in life. I certainly cannot hang off a rope with one arm behind my back. Not nowadays anymore, I did use to be able to stand on my hands, might just about be able to do a cartwheel still. Comments on your setup: 1) Yes, you will need ids for that. When you use class names, you will be hitting every element that has that class. If you have many of those buttons, you can create a function to create those timelines rather than writing repeated code. 2) You can refactor your two timelines into a single one by using the position parameter and a repeatDelay: var seoTween = new TimelineMax({ repeat: -1, repeatDelay:1 }); seoTween.to("#seoTicker", 0.1, { alpha: 0, }, 0) .to("#seoTickerHover", 0.1, { alpha: 1, }, 0) .to("#seoTicker", 0.1, { alpha: 1, }, 1) .to("#seoTickerHover", 0.1, { alpha: 0, }, 1);
  19. Dipscom
    Hello afandiyusuf, Welcome to the forums! I hade a look at the documentation for the ScrambleText plugin and saw no reference to it being possible. Are you asking this because the text you are going to animate is on a right-to-left language, by any chance? Or are you just trying a different effect in a left-to-right language?
  20. Dipscom
    OSUblake will be so proud of me once he sees my reply to your question. As I was asking the very same thing not too long ago. It was all witchcraft for me too, some of it still is... Here we have a function that takes two arguments: element and _path function circlePath(element, _path) { ... } Element and _path are the names I chose. It could be anything but it's better to have them make sense. Element should be pretty straightforward, it's the element you're targeting, and _path was meant to avoid confusion with the SVG's path. Because you are using path and pathTwo on your pen as variables already. The "MoveCircles" in here: .add(circlePath("#circle", path), "MoveCircles") Is the position parameter being used as a label. Check a detailed explanation by Carl. It makes sure all the methods that have "MoveCircles" start at the exact same point in time.
  21. Dipscom
    Hello! The solution to your issue is in the position parameter and the different between the .to()/.from() method and the .staggerTo()/.staggerFrom() methods inside a timeline. From the docs: .from( target:Object, duration:Number, vars:Object, position:* ) : * .staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* ) : * See how different the methods are? The part that you need to focus on is the first parameter after vars - in a normal .to()/.from() it's the position parameter, in a .staggerTo()/.staggerFrom() it's the stagger parameter. If you adjust the example pen with that new information, all suddenly works again. http://codepen.io/dipscom/pen/NbvZZq?editors=1010 Why you need a staggerSet() method? You can set a bunch of elements inside an array with a single .set() method by feeding an array and it will set whatever it is you need in one go. TweenMax.set(arrayOfElements, {...});
  22. Dipscom
    Here you go. Don't take it as gospel - except for the rules, they're pretty much rock solid and you'll be a better coder by following them. I didn't come up with them, I am just a follower. This is not the one and only way of achieving, it's just how I'd do it. Have a look, compare with your version it should make sense. http://codepen.io/dipscom/pen/NbvWqZ
  23. Dipscom
    Not using RaF would circumvent it but your animation performance would suffer in general. Not advisable. I think you could set a timer at the start of the animation and make it jump to the progress of the timeline once it's back in the viewport. I'm not at my computer now but, if you have a sample I could borrow, I could try and set something up for you. Does this behaviour happens in CodePen as well?
  24. Dipscom
    Hi struthyBhoy, I'm not near my computer but will be happy to have a crack at it later on if you are OK with it being a few hours from now. It's Thanksgiving weekend in the USA (for the non USA centric people) so, some of others might not be around as much. Having said that, who knows, someone might beat me to it.
  25. Dipscom
    Hi HectorJearim, Welcome to the forums! When you say you're "new on this". On what are you new on? Particle animation? Canvas? GSAP? Development in general? I ask because what those links show are rather complex setups, not really for the beginner developer, there is going to be a lot of basics you need to cover to achieve something like that. Did you check the GitHub repo of that Particles.js? Is there a particular reason why you would want to recreate that using GSAP? Would that Particles.js not work in your project? It seems to do what you are asking for.
44
45
46
...
65
Page 45 of 65  
×
×
  • Create New...