Jump to content
Search Community

kaplan

Premium
  • Posts

    21
  • Joined

  • Last visited

Everything posted by kaplan

  1. Thanks, Jack. I follow what you are saying. Playing with my version, I see some jumping when I start back up. I will build out a CodePen; I'm sure it will help me. I'm working on the project locally right now. I can describe what I am building: I have a stack of images, and fading the top one down reveals the next. When that top image fades out, onComplete, all the images get a z-index shuffle, the faded current image goes to the bottom of the stack and the opacity goes back to 1. My original version is working with separate tweens, but it would be better to control the entire group of tweens in a timeline. Then, it would be easier if I wanted to start or stop based on the position of the images in the viewport or with a click, I wondered. The problem is when I pause the timeline, the current image could be mid-fade, creating a double-vision kind of feel. @ryan_labar that's pretty cool and illustrates what I'm thinking. :-) I had to look up what && does outside of an if statement! I'm working on my JS skills. I'm trying to make the slideshow modular, and getting there. If I can share a link https://midlifeslices.com/blog/what-now has this 1st version slideshow running on there... it's basic... but I'm getting to learn Laravel and GSAP (again).
  2. Hi, I am making a slideshow of images with a timeline, and I would like to be able to pause the parent timeline but have the current tween of the timeline finish its animation. I can do something like the following: it's not working, but that might be related to my target. Could this work... currentTween.play()? if (this.timeline.isActive()) { const currentTween = this.timeline.getTweensOf(this.images[this.state.currentIndex-1])[0]; // If there's a currently active tween if (currentTween) { // Pause the main timeline this.timeline.pause(); // Play the current tween independently currentTween.play(); } Thanks, Dave
  3. Thanks guys!! I'm getting there and playing around. I've been cramming on SVG paths, polyline and masks. Paper.js looks cool, but I'm going to need to keep the filesize down. Found svg.js it looks handy and is pretty small, but I don't think I need it. I'm starting to get there, just playing around to see what I figure out. http://codepen.io/kaplan/pen/zBjxrE
  4. Wow! Thanks sharing those links Craig! Blake is awesome! Just realized I have some of your codepen work 'hearted' too. [edit-edit] ( i do think Blake is from the Matrix )
  5. I'm looking for suggestions or references on how I can draw in the browser with the mouse. I'd like to have the mouse movement create a svg path. I've been looking at Paper.js and D3js. I know that I'm going to be doing some animation with GSAP in addition to the drawing, so I'm also thinking about potential gotchas. If I end up with a canvas and svg paths, is GSAP ok with Canvas? This is a classic technique from the old ActionScript days, to scribble out lines created by the mouse and I'm hoping to do it with SVG path. It looks like paper.js is small and works with canvas, (I need to keep the overall file weight down) and a d3js example looks like it's just straight svg. Any advice or insight would be appreciated.
  6. thanks jonathan! uh-boi... it never ends with a the browsers does it. i'll have to do some testing on those thanks!
  7. Thanks you guys rock! I added a few more examples to the pen and the -webkit-mask-image really does fix it! Codepen is acting weird with my 4th svg and Chrome unless it's viewed in debug: http://s.codepen.io/kaplan/debug/ojmbRm I also put one on my server: http://workalicious.com/fq540/svg-safari-debug/ @Ohem, I saw that mask thing when I first started research, but I couldn't get it working. I don't think I tried hard enough. Your example showed me the way. @Jonathan, I'm using object and svgs as data and dynamically generating a whole bunch of them. I was thinking the svg data would look better and be faster than pngs and imgs, but I'm not benchmarking or anything. It's a get it done situation. thanks again!
  8. I'm trying to find a fix for an older version of Safari. I have some elements animating in div that I've made into a circle using border radius with an overflow hidden. It works great on the latest browsers, but in older versions of Safari the element 'breaks' out of of the div when it's animating. I've read adding a border setting to container will fix it, but it's not working when I test in Safari 7.1.4. I know this is browser but and not a GSAP issue. I'm wondering if anyone has found a good fix for this Safari issue. On the plus side it works great in IE9 the overflow animating that is ... not codepen ;-P http://codepen.io/kaplan/pen/ojmbRm Thanks!
  9. Thanks Diaco, I made a pen and played around. I was imagining making tween objects (outside the timeline) then adding them into a sqeuence. I see now if I make those outside the timeline then add them they won't play until the timeline runs them. Here's my codepen: http://codepen.io/kaplan/pen/MazZWJ The 3 tweens are made with new, then they get adde to a timeline after another tween and they don't run until the playhead hits them. It looks like if they're not paused and not 'add'ed they just run, ah... that's the object-oriented tween that must be a default of to
  10. Hi, I was reading about making object-oriented (oo) tweens in the TweenMax doc and I see that it plays automatically when it's created unless I add paused:true. I get it, then I can do tween.play() to run it. var tween1 = new TweenMax(myObject, 2, {width:200, height:150, paused:true}); I think what I'm wanting to do, and this might be the wrong way to go about it, is setup some tweens in this oo approach and add them to a TimelineLite object, but if I don't pause the tweens they run right away and if I add them I need to start the individual tweens. //add an array of tweens 2 seconds after "myLabel" tl.add([tween1, tween2, tween3], "myLabel+=2"); Asking in another way: If I'm adding tweens to a timeline that are oo created tweens, how do keep them from playing during the creation and then playing when I need them to in the timeline? Thanks!
  11. I'm curious about using the JS GSAP to recreate something I did with Flash. I have a movieclip, I placed 'points' (little movieclips) randomly around the stage and if they hit the bigger shape I stored the position. Then I animated to those points. I'm curious if there's something like an AS3 HitTest that I can use. I'm just looking for a nudge in the direction, any advice or insight would be nice. Here's my original Flash animation: http://workalicio.us/ Thanks!
  12. Hi, I wanted to start a discussion for feedback and thoughts on the best ways to do some masking animation. I've seen the really good one with the green grass and the star shape, but it doesn't work in Firefox. I did find a stackoverflow topic where the author found the Attr Plugin worked with changing <rect> properties! I've got a couple examples up on Codepen and wondered if anyone else has thoughts, examples or work arounds for something we do in Flash so easlily. I'm looking to try and mask an image and reveal it from the center out. clipPath, clip-path and svg are new subjects for me and I found that this works great in Doesn't work in FF http://codepen.io/kaplan/pen/waxrKe Attr Plug makes it work! http://codepen.io/kaplan/pen/bdjoRa I have a local version that does some offsetting and has overflow hidden that I'm going to put on Codepen, but it looks jumpy. This is the other forum post: http://greensock.com/forums/topic/11215-svg-masking-with-gsap-animation/ This is the SO post: http://stackoverflow.com/questions/29413359/animated-svg-clipping-path-not-working-in-firefox
  13. Thanks Carl! I think I realized that after trying it several dozen times. It's really nice to have the confirmation that 'auto' is not a path worth following.
  14. Wow! Thanks Diaco.AW. xPercent!? I need to look that up. I also think I'm using the TweenMax css settings wrong. I think of 'left' as a CSS property and would wrap it up, but it doesn't seem like that's necessary with TweenMax? TweenMax.to(slideToMoveLeft, 0.50, { css:{ top: '12%', width: '35%', left: '5%', right: '95%', }, }); And thanks for sharing rgfx, that's a nice example! EDIT: I looked up the xPercent and found this post. http://codepen.io/GreenSock/blog/responsive-animations-made-easy-with-gsap-1-13-1
  15. Hi, I'm looking at animating an Absolutely positioned (in the center) to specific percentage on the left-margin. I can get it to work as long as the marginLeft isn't set before hand other than in the CSS, but when the element has that left-margin style inline and then I tween to say 4%, it jumps all the way to the left and then moves the 4%. I have a codepen setup, if you comment out the marginLeft and marginRight and only have that set in the CSS it works correctly. Am I thinking about margins (and absolutely positioned elements) incorrectly? http://codepen.io/kaplan/pen/rmKzG Thanks, Dave
  16. Wow there are some cool examples! I'll try and start putting stuff on CodePen too. Hi, I started to play around with GSAP when it was in beta. I made this animation, code on Github, after watching Lee Brimelow's video. I'm getting back to GSAP now and really looking forward to it and checking out and sharing some fun stuff in the community.
  17. Wow, thanks Jack!!! Great explanation! That was exactly what I was wondering, what's going on there?! Love it! I'm looking forward to digging into the Javascript version. I've used the AS version for a few years, this is going to be fun!!
  18. Hi, I'm just wondering how to use TweenLite to tween a css property without using the CSSPlugin? I know this is probably really dumb, but I'm trying to get a better sense of what's going on in the Tween. What would I use to do this without the CSSPlugin? element = document.getElementById("element") TweenLite.to(element, 1, { css:{opacity:0.5} }); Thanks for reading.
  19. That's awesome!! Mark this post solved! Thanks Jack! Kind regards, Dave
  20. Hi, Sorry, this might be a why would you want to do that question... I'm wondering if it's possible to tween a projectionCenter point. Let's say I have something like the following: perspectivePoint = root.transform.perspectiveProjection.projectionCenter = new Point(480,200); trace(perspectivePoint.x); // traces 480 I have a group of objects that are at different z's and I'd like to do a subtle shift the perspective instead of rotating y or x. Is that crazy? I'm a better off just using rotationY. Is it possible and how would I tween something like the perspectivePoint.x? And have the stage's projectionCenter update itself? Any advice or insight would be really great. Thanks, Dave
  21. Hi, I'm wondering why this doesn't work: // clip is off stage and I want to move it on stage at 50, set it's alpha to 0 and fade it up. TweenLite.to(clip_mc, 1, {onStart:onStartTween, onStartParams:[clip_mc], _alpha:100, overwrite:false}); function onStartTween(mc) { mc._x = 50; mc._alpha = 0; } Am I doing this all wrong? It works the other way: TweenLite.to(clip_mc, 1, {onStart:onStartTween, onStartParams:[clip_mc], _alpha:0, overwrite:false}); function onStartTween(mc) { mc._x = 50; mc._alpha = 100; } Any insight is appreciated, Thanks! Dave K.
×
×
  • Create New...