PointC last won the day on April 17

PointC had the most liked content!

PointC

Moderators
  • Content count

    1,982
  • Joined

  • Last visited

  • Days Won

    158

Everything posted by PointC

  1. Draggable snap

    Hi @SimonDucak Looks like you just missed the ThrowProps plugin in your demo. Here's the CodePen version: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js Happy tweening.
  2. sequence-video without jquery

    You still have an infinite timeline in your bunnyInTheBack() function which will cause problems with the master timeline progress() slider. // this is a problem const bunnyInTheBackTl = new TimelineMax({repeat:-1, repeatDelay: 10}); If you want that rabbit to pop up/down forever, I'd recommend making it a separate tween or timeline so it doesn't cause problems with your masterTl. Or you could set it to just a couple repeats if you prefer to leave it as part of the master. Happy tweeing.
  3. sequence-video without jquery

    It looks like Shaun is working on an answer, but I'll jump in quick while we wait for his reply. You've got a couple issues with the project. To wire things up from my demo to your project, you'd need to target your masterTl timeline with the draggable element and all the event handlers. 1. Wiring a slider up to an infinite timeline (you have repeat:-1 on several nested timelines) is tricky. I would imagine you'd want users to be able to scrub the animation from start to finish so I've removed the repeats in my fork. 2. The other issue is setting the dragger bounds to 100% instead of a fixed width. This can work by getting the width of the bounds and restricting the dragger to those coordinates. The trick is on resize. You need to listen for a resize event and set new bounds as well as re-position the dragger correctly so it's at the same percentage point of the new bounds. Here's a fork of your pen with everything working correctly. Happy tweening.
  4. sequence-video without jquery

    I prefer Draggable for that type of control. Something like this: Hopefully that helps. Happy tweening.
  5. sequence-video without jquery

    A good site to bookmark. http://youmightnotneedjquery.com/ Happy tweening.
  6. I have a problem with "rotate"

    Hi @dimka Welcome to the forum. It looks like you're trying to create a timeline, but your pen isn't loading TimelineLite or TimelineMax. It's usually easiest to load TweenMax which includes the following by default: TweenLite TweenMax TimelineLite TimelineMax CSSPlugin AttrPlugin RoundPropsPlugin DirectionalRotationPlugin BezierPlugin EasePack Here's a fork of your pen with that change. Hopefully that helps. Happy tweening.
  7. Moving Clouds

    You'd need to write it like this: .add(clearStage(), 0) .add(cloudsMoving(), 1) .add(enterFloorVegetation(), 0) Right now, you have the label names in the position parameter spot and the 1 and 0 are over in the align spot which only applies in the case of an array. More info about add(). https://greensock.com/docs/TimelineMax/add() You could also add a label and then start the nested timelines at the label like this: .add("someLabel") .add(cloudsMoving(), "someLabel+=1") .add(enterFloorVegetation(), "someLabel") Hopefully that helps. Happy tweening.
  8. Moving Clouds

    Do you mean in your go() function where you build the master timeline? If that's the case, I'd just use a position parameter of 0 to start any/all of the nested timelines at the same time. Happy tweening.
  9. Moving Clouds

    Hi @Josefina I'd certainly follow @OSUblake's advice. It's a great way to get repeating clouds. That being said, I thought I'd throw my two cents worth out there for you. What you were doing by moving the cloud to x:-2400 can move it off the stage, but then the cloud movement was x:"+=3000". That setup actually only animated to x:600 from its original position (0-2400+3000) which simply wasn't far enough to go beyond the right side. Here's a basic example with the same width as your SVG and a circle path standing in for the cloud. I've set the SVG overflow to visible so you can see where things are landing. You can see that moving it to -2400 does indeed move far enough to the left, but a 3000 unit move is not enough to go off the right side. SVG coordinates can be a bit confusing sometimes so hopefully that helps a bit. As I said, Blake's approach is great and I'd recommend following his advice for some easy repeating clouds. Happy tweening.
  10. Is there any reason you're not using a timeline for this? TweenLite.defaultEase = Linear.easeNone; var tl = new TimelineMax({repeat:-1}); tl.from(".div1", 0.5, {x:100}); tl.to(".div2", 0.5, {y:100}); tl.from(".div3", 0.5, {scale:2}); tl.from(".div4", 0.5, {rotation:360}); More info: https://greensock.com/docs/TimelineMax Also check out the position parameter: https://greensock.com/position-parameter Happy tweening.
  11. Getting acclimated with GSAP

    Hi @pikemilsner Welcome to the forum and thanks for joining Club GreenSock. We've had several discussions about modals that I think can guide you on your project. Here's a recent one from @Sahil This thread is about hero transitions and making a div go full screen, but should give you some ideas. @OSUblake drops some awesome knowledge. You can also search the forum for modals and should find several threads with many ideas. Hopefully that gets you started. Happy tweening and welcome aboard.
  12. Move paths to absolute position

    I've forgotten that rectangle many times too. One thing I've done to help my memory is set up a collection of templates for Illustrator that already have a background rectangle ready to go. I think it's one of those overlooked features of AI that really is quite helpful. All you do to create a template is File --> Save As Template. Then 'New From Template' instead of 'New' when you start a new project. I have several using the SVG sizes I use most often. I drop in a background rectangle and some empty named layers for artwork. It'll also remember the palette and a lot of your other settings. I work on a fairly large screen so I was always increasing the thumbnail size in the layers panel options each time I started a new document. That too is remembered in a template.
  13. Move paths to absolute position

    My biggest tips for taming the gremlins that reside in Adobe Illustrator's SVG Export would be convert to compound paths and always include a background rectangle that matches the same dimensions as your master SVG. Take this simple example If we leave them as rectangles, we get this for output: <svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 600 300"> <rect width="600" height="300" fill="#000"/> <g id="boxes"> <rect x="100" y="50" width="200" height="200" transform="translate(164.64 -97.49) rotate(45)" fill="#c1272d"/> <rect x="200" y="50" width="200" height="200" transform="translate(193.93 -168.2) rotate(45)" fill="#7ac943"/> <rect x="300" y="50" width="200" height="200" transform="translate(223.22 -238.91) rotate(45)" fill="#3fa9f5"/> </g> </svg> But if we convert them to compound paths, we get this: <svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 600 300"> <rect width="600" height="300" fill="#000"/> <g id="boxes"> <path d="M200,291.42,58.58,150,200,8.58,341.42,150Z" fill="#c1272d"/> <path d="M300,291.42,158.58,150,300,8.58,441.42,150Z" fill="#7ac943"/> <path d="M400,291.42,258.58,150,400,8.58,541.42,150Z" fill="#3fa9f5"/> </g> </svg> I always recommend the use of a background rectangle so there are no coordinate surprises. If we remove that rectangle, we get this: <svg xmlns="http://www.w3.org/2000/svg" width="482.84" height="282.84" viewBox="0 0 482.84 282.84"> <g id="boxes"> <path d="M200,291.42,58.58,150,200,8.58,341.42,150Z" transform="translate(-58.58 -8.58)" fill="#c1272d"/> <path d="M300,291.42,158.58,150,300,8.58,441.42,150Z" transform="translate(-58.58 -8.58)" fill="#7ac943"/> <path d="M400,291.42,258.58,150,400,8.58,541.42,150Z" transform="translate(-58.58 -8.58)" fill="#3fa9f5"/> </g> </svg> Even though these are compound paths, we now have transforms on them and our viewBox is not the 600x300 we were working with in AI. I think a lot of people assume the SVG will automatically be the same dimensions as your AI project, but that is not always the case. You can skip the background rectangle and still get the correct size if you choose to export the artboard or assets, but I don't care for that approach because you can't see the code before you export. I also find the code gets a bit more bloated by doing that. One other thing that is available in AI should you be getting some strange coordinates is under the top menu: Object --> Transform --> Reset Bounding Box. For my own personal workflow, I sometimes put all my groups stacked on top of each other at coordinates (0,0). I then use GSAP to move them to their starting positions. Happy tweening.
  14. flip an object

    Okay, I just re-read your question and I think I understand what you'd like to happen. Since you're a Club member, you have access to CustomBounce and CustomWiggle: https://greensock.com/wiggle-bounce Using that, you could easily wiggle an element and have another element drop from it. Here's a quick demo with a couple basic divs. Hopefully that points you in the right direction. Happy tweening.
  15. flip an object

    Hi @Josefina Welcome to the forum and thank you for joining Club GreenSock. I'm not 100% sure I understand your question. I would think that transformOrigin change on the second tween would create a bit of a harsh jump. If these are SVG elements you could take a look at smoothOrigin. More info: https://greensock.com/svg-tips If you could put that into a demo, we could get you better answers. Here's some more info about that: Happy tweening and welcome aboard.
  16. PIXI Container + GSAP

    Thanks. I didn't know that. I've mostly been adding sprites etc... so I've barely touched the graphics commands.
  17. Why doesn't timeline start right with page loaded?

    I'd bet you're missing the GSAP plugin which allows ScrollMagic to hijack the tweens. <script src=" https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script> More info: http://scrollmagic.io/docs/animation.GSAP.html Happy tweening.
  18. Animation test - moving an element on a path

    It's the center point (cx/cy) of the big circles. That's what I was referring to in my first reply when I said I had made a slight modification to your big orbit circles. Some of your big circles were at 323, 326.5 etc... so I moved all of them to a 326 326 center and animate the icon groups around that point. Happy tweening.
  19. Animation test - moving an element on a path

    You'd just need to create separate groups for the different speeds. Something like this maybe. Happy tweening.
  20. Lines appearing after animation (issue on Chrome, Opera)

    Please try adding this to your .door CSS: outline: 1px solid transparent; Happy tweening.
  21. Just for giggles have you tried rounding that translate down to whole numbers instead of the current two decimals? (or removing it completely) It shouldn't be a problem, but I've seen some odd stuff with my SVG animations.
  22. Loops, arrays, and delays. oh - my

    That onComplete will fire at the end of the whole tl timeline when all three text elements have faded out completely. You can add onComplete calls to the tweens too if you wanted/needed to do that. Adding one to a stagger is a bit of a different beast though. You have to remember that a stagger returns an array of tweens so adding an onComplete in the vars will fire each time one of the staggered elements finishes its animation. To call a function after all the staggered elements have finished you would use onCompleteAll which goes in a different position. For a tween, it goes after the stagger number. TweenMax.staggerTo( targets:Array, duration:Number, vars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) If the stagger is on a timeline, it goes after the position. tl.staggerTo( targets:Array, duration:Number, vars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* ) Hopefully that helps. Happy tweening.
  23. Loops, arrays, and delays. oh - my

    Hi @KerryRuddock How about something like this? Hopefully that helps. Happy tweening.
  24. Jump to Next Section

    Hi @launchcatapult Welcome to the forum and thanks for joining Club GreenSock. I couldn't get my scroll wheel to work on the site so I'm not sure if everything is 'wired up' yet or not. After I clicked one of the menu buttons the wheel worked, but the whole scene moved really slowly. It's always harder to answer questions looking at a live site instead of demo. I think what you're looking for is the position parameter. https://greensock.com/position-parameter You would add labels to the timeline and then play() from a certain label when one of your transitions is finished via an onComplete callback. Or if you're trying to change the scene in the middle of the transition, you could make that master timeline label jump at the 50% progress point of the transition animation. If you could put together a simple demo, it would be easier to advise you. Here's a some info about that. It does not need to have your actual project assets. Just enough elements to demonstrate the question or problem would be best. Happy tweening and welcome aboard.
  25. GSAP link

    You can't see all of it, but if you triple click and copy you'll get the whole link. You can also bookmark this: https://cdnjs.com/libraries/gsap Happy tweening.