Jump to content
GreenSock

alwayzambitious last won the day on May 14 2014

alwayzambitious had the most liked content!

alwayzambitious

Members
  • Posts

    101
  • Joined

  • Last visited

  • Days Won

    2

Everything posted by alwayzambitious

  1. Thanks Carl for the helpful answer. Is there way to let the tween know that the position was shifted, or is my hacky workaround a good way?
  2. Solved! TweenMax.to($this.children(':first') , 5, { alpha:0 , delay:2, onComplete: reset}); function reset() { TweenMax.killTweensOf($this.children(':first')); $this .children(':first') .css('opacity', 1) // Return opacity back to 1 for next time. .css('zIndex', $this.children(':last').css('zIndex') - 1) // Reduces zIndex by 1 so that it's no longer on top. .appendTo($this); // move it to the end of the line. TweenMax.to($this.children(':first') , 2, { alpha:0 , delay:2, onComplete: reset}); }
  3. Thanks Jonathan, Ill give it a shot. And after some forum searching, I found a different way to achieve the same photo fade out effect I wanted. Ironically in a post you started Jonathan http://forums.greensock.com/topic/8131-how-to-make-tween-or-timeline-accept-new-selector-value/
  4. im trying to make a photo slideshow that fades the top image to 0 move it to the bottom of the ul stack and then set the opacity back to one and then fade the new top image to zero when it repeats tho its still thinking :first element thats now at the bottom of the stack is still at the top. This is the js TweenMax.to($this.children(':first') , 1, { alpha:0 , repeat: -1, repeatDelay:3, onRepeat: reset }); } function reset() { console.log($this.children(':last').css('zIndex') - 1); $this .children(':first') .css('opacity', 1) // Return opacity back to 1 for next time. .css('zIndex', $this.children(':last').css('zIndex') - 1) // Reduces zIndex by 1 so that it's no longer on top. .appendTo($this); // move it to the end of the line. } this is the html <ul id="slider"> <li> <img src="img/demos/demo1.png" /> </li> <li> <img src="img/demos/demo2.png" /> </li> <li> <img src="img/demos/demo3.png" /> </li> </ul> ... after it runs once, demo1.png is at the bottom, but then the tweenmax call still tweens that image as if its first... and for reference this is the setinterval function that i got the code from that i wanted to rewrite using greensock setInterval(function() { $this.children(':first').animate({'opacity' : 0}, options.speed, function() { console.log ($this.children(':first')) $this .children(':first') .css('opacity', 1) // Return opacity back to 1 for next time. .css('zIndex', $this.children(':last').css('zIndex') - 1) // Reduces zIndex by 1 so that it's no longer on top. .appendTo($this); // move it to the end of the line. }) }, 1000); I know im missing something important here, anyone have an idea as to how to make the Tweenmax repeat see the new :first element?
  5. Ask and Ye Shall Find! Hey GSAP Team, I present a solution not a problem this time Remember I asked about structuring a site w GSAP I found something on using AngularJS Framework that uses a bunch of different type of ways to animate. Below is an example using Greensock ( and other animation methods) to animate pages. http://www.yearofmoo.com/2013/05/enhanced-animations-in-angularjs.html Note: this is one way to do it you def dont have to use Angular but as a framework it seems to be picking up in popularity so it cant hurt. Like I mentioned in a previous post Im working on a site without a MV* Framework. Warning: AngularJS is not for the faint of heart, I am now learning the basics of it. You guys who are further along with javascript frameworks can do something with it. But once I get this down things should get really fun from here on out. Enjoy your holiday for those in the US. - Dwayne
  6. Thanks Rodrigo for your detailed tips! One step at a time indeed. I found an example of a site that has simple transitions. Though its built with jquery I think I can get replace the animate calls with tweenmax and timelinelite calls and come up with a structure I would post the example but since its not built with greensock I rather wait to show my version of it with GSAP for the purposes of the forum Dwayne
  7. http://jackthegiantslayer.warnerbros.com/ Just sharing...
  8. The new Batman movie site: http://www.thedarkknightrises.com Mountain Dew: http://mountaindew.com Toshiba Tablets: http://www.thetoshibatablets.com GOOQX: http://gooqx.com I dug up some good sites thats was done in js last year but through doing a view source im not able to find the js file to see how they structured it. I also notice that these js sites some of them are like verticall long scrolling sites, to each his own but im looking for something that doesnt have the scrolllling vertical feature. After looking at the batman site, i def see the markup is written out in divs that correspond to each section of the site, so that what i did at least is not too far off from structuring the markup, now ill see if I can only get a peek at the js..
  9. Big disclaimer: Tho this isnt specific to greensock i do hope to contribute what i learn to the community... if there is a better space for this question im open to hearing. http://dnecklesportfolio.com/testing/index.html Here is the first page of a simple 3 page site. Would putting each "page" inside of a DIV and then transitioning in and out the elements of that div with GS be one way to go structuring a GSap based site. Though it doesnt animate I started that route at the link above. Let me kno if im on the right track
  10. Carl. Thank you for writing this. I wasn't clear Please dont mistake my question to mean that you guys aren't doing enough. You guys really are doing a lot. My prev question is not really greensock issue/question but broader html5/js/dom workflow question. I only posted my question on this forum cause using gsap is key to my workflow and i figured greensock users could show me an outside resource they used to learn how to build their sites. I didnt mean to insinuate greensock to create a new tute or learning resource that applies to full sites. I get that canvas is not used for full site. If it is dom, thats fine too. I'm open to whatever the path is to get there. I think i was just trying to get a handle what is better. Thanks for settling it. I will use the animatein/animateout structure and apply it to JS. I coded the first page of my site up and Im going to get started applying gsap: http://dnecklesportfolio.com/testing/index.html Hope this clears up alot.
  11. Real World Benefits of OOP with AS3 for the Completely Terrified: GreenSock Homepage Animation Case Study http://www.snorkl.tv/2011/05/real-world-benefits-of-oop-with-as3-for-the-completely-terrified-greensock-homepage-animation-case-study/ Is there a version of the above tutorial for javascript canvas oop sites.....Most examples were so small that I could not see how they might be applied to the kind of full websites i build. Apologies is my questions werent clear.
  12. After a little research, it seems as if Kinetic (competitor to Easeljs?) is new standout to build oop like sites. it has that grouping structure like the ability to do Movieclips in flash So there goes the DOM method of building sites. Also, no other resources out there use canvas for building full sites. Still looking...
  13. 1. unfortunately I see a whole lot of small snippets of code on codepen, but i need to build a full website that i can animate with greensock just like i used to w/ flash but in all of the books i have, csstricks.com is awesome but it doesnt show how to build in conjunction with GSAP. 2. also the other frustration is.. should I build in canvas or use the css dom?... css is smoother canvas has performance issues tho kinetic helps that What information am i missing or not considering. I'm sure its my learning style. I see Kinetic looks good but besides an experiment here or there, id like to how its used in a full website. 3. id also be interested in sharing this info on others once i learn how to properly structure, Thanks for reading.
  14. i found this... http://interactive.the-forgery.com/#/2012/07/13/tweenmax-javascript
  15. Well I guess since Ive first used greensock in flash, the weakness of flash was that it wasnt practical to use it with wordpress cms. using greensock to me is like being able to create a cool animated engaging website like i used to do in flash but now we have wordpress as the cms. I know how to use greensock now im learning php/wordpress to see if the two can integrate. Dwayne
  16. greensock, i can't wait to show you what i did! Its looks simple but it's kinda neat because the carousel is dynamic in that even though it only has 5 spots... it can HOLD more than 5 spots... and cycle and loop correctly in any direction... it wasnt easy.... maybe advanced.... but definitely i wouldnt mind sharing the source or more importantly the thinking behind the code... and prob sell it on activeden This was kind of a challenging project, but I did it for the most part. Thanks greensock and everyone else for your help. updates soon!
  17. http://dnecklesportfolio.com/transfer/a ... ousel.html I got it to work, I just accessed the movie clips directly instead of through the circle.followers array. question tho, when i click to fast it acts erratically... im thinking it should tell where it should be on the carousel and then go there....even if its a few steps ahead
  18. Hey I've tried it using The plugin and the carousel is working well.. now for the on update, I need access to the movieclips to tell what its progress is...that way I know what their alpha and blur amount should be.. depending on where they are on the circle... tracing out circle.followers.progress I get null.. any thoughts..
  19. Thank you for that tip. Yes I will check it I have an array that holds six positions on the path, that the product should move to. var arrPositions:Array = [ .52,.625,.75,.875,.99,.25 ] when its at position .25 alpha is 0 and when u click the arrow the yogurt in that OFF position, it then moves to the first position at the top or back of the carousel while fading to 100 opacity. I may just work in degrees. Would the plugin make it easier than that? I'll keep it at it. Thanks for the fast response.
  20. hit the bottom arrow point down... notice what the first cup does.. i want it to go in the other direction.. Here is my code function slide2NextProduct (e:Event) { //trace("slide2NextProduct") for (i =0;i<5;i++) { if (i<5) { var oldPos:Number = this["follower"+i].target.progressPos var newPos:Number = oldPos+1 TweenMax.to(this["follower"+i], 1, {progress:arrPositions[ newPos ], onUpdate:hideSome }); } else { TweenMax.to(this["follower"+i], 1, {progress:circle.followerTween(this["follower"+i], 270, Direction.CLOCKWISE)}); } } }
  21. Yeah, I haven't hyped it at all yet. I hope to add a couple more types of paths eventually and then do a post about it. FYI, there's even a CirclePath2DPlugin that you can use to help build tweens along a CirclePath2D. So far so good... but am I unable to choose the direction of the movement along a path if i dont set the progress in degrees . it looks i can only do that when i set progress in degrees.. not in terms of 0 to 1..am I misreading the api?
  22. also.. i never knew about the motionpaths part of your tweening library.. i will research and look into it Learn something new everyday
  23. Thank you greensock... I didn't want nor expect you to walk me through the code bro, a nudge is all i needed.. Thank you soo much for the lead.... updates soon...
  24. Thanks Greg Ill try that. ANyone else... Is my question not clear?
×