bunnie
bunnie's Achievements
0
Reputation
-
Thanks a lot Rodrigo, I will do that!! This works like a charm! You're amazing! Thanks & Regards, Bunnie
-
Hello Jamiejefferson, Thanks for your response!I changed my code as you said but it stopped animation and didn't work. Can you please make modify my codepen given below: http://codepen.io/rhernando/pen/eDmsv Thanks & Regards, Bunnie
-
Hello Rodrigo, Thanks for your fast response! I wish it was simple I forgot to mention that, my list is dynamic so I cannot create individual containers with a set of 3 objects in my html. Initially I thought of this but it didn't work. My list might contain any number of objects may be 2 or 10 or may be 100 in it so, I cannot divide my wrapper into individual containers in HTML, it should happen dynamically in the code. Sorry for having many back and forth conversations. I am not sure if there is a simple solution to this and I am thinking in a more complicated way.. I really appreciate your help! Thanks & Regards, Bunnie
-
Rodrigo, Great work Rodrigo!! I seriously surprised with your dedication! Thanks a lot for your response! This is what I am looking for but needs a small change... I have a fixed block to display this list of objects on my page, i:e for ex: width 100px and height of 150px which accomodates only 3 objects at a time. So once the first set animates and fades off I want to display the second set in the same block or the same place.. Now what happens is: First set animates top of the page and fades off, then second set starts underneath it leaving the top of the page blank.. I want to display the set of objects in the same block.. Since the opacity is 0, each set of objects disappears after their animation; can we clear this Timeline and call the next set of objects so that we them displayed in the same place or same block? I am trying to figure out a better way to do this. Please let me know if this is clear or I am confusing you more.. Is there a way that I can display the each set of objects in the same block? You guys rock! Thanks & Regards, Bunnie
-
Carl, I just realized sometime back that the overwrite is used in a different scenario. I am trying a similar approach what you said. I am having trouble in adding a callback.. 1.All my objects are in a list meaning they are classified under the same class. As you said I want to create 3 tweens for thirst three objects, do I have to refer to the item using index? $('.tick').each(function (index, item) { t1.from(item, 0.7, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut }) }); Can you please provide me an example or a code snippet demonstrating your approach in codepen. That would really help! I really appreciate your help, Thanks for your time. Awaiting your response, Bunnie
-
Rodrigo, I am really sorry for troubling you! I will try implementing your approach. Please take your time and post the solution whenever you are convenient! Thanks & Regards, Bunnie
-
Can I create multiple timelines on the fly and set them to true one at a time? Can someone please help with me! Thanks & Regards, Bunnie
-
I need timeline with repeat and yoyo only oncomplete of all items not for every three items. I gave numbers for example, please give your snippet with the items as you have showed in the codopen before! I tried to overwrite the first set of items(3 items) with next three, but overwrite didn't work Trying to figure out other ways to do this: Meanwhile, if anyone has a solution please post it... Here is what I tried.. But I guess overwrite doesn't work in this context.. CSSPlugin.defaultTransformPerspective = 600; var t1 = new TimelineMax({ repeat: 1000, yoyo: true, repeatDelay: .5 }), count = 1;//the label number $('.tick').each(function (index, item) { t1.from(item, 0.7, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut, overwrite: "none" }, 'label' + count) count++ if(index % 3 == 2) { t1.TweenLite.defaultOverwrite = "all"; } });
-
I want to tween first three items and then replace the 3 items(overwrite) with next three items for tweening and after that I want to overwrite next 3 : continue so on until the end of items and oncomplete, I want to repeat the whole process. I am using overwrite to overwrite the first three with next three but it doesn't work! Can someone help me with this? Is something wrong in my code? Any help will be greatly appreciated! CSSPlugin.defaultTransformPerspective = 600; var t1 = new TimelineMax({ repeat: 1000, yoyo: true, repeatDelay: .5 }), count = 1;//the label number $('.tick').each(function (index, item) { t1.from(item, 0.7, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut, overwrite: "none" }, 'label' + count) count++; if(index % 3 == 2) { t1.TweenLite.defaultOverwrite = "all"; } });
-
Thank you Rodrigo! I will be waiting for your response!
-
Hello, Thanks for your fast response! I think my question was little confusing.. I want to display first three items one after the other in a row and then overwrite them with next three items and so on... For example first I want to display 1 2 3 and then overwrite them with 4 5 6 and then overwrite them with 7 8 9 until the end of items and repeat the whole process. I wanna have different tweens for 1, 2, 3. The tween applied for 1 will repeat for 4,7 and the tween applied for 2 will be applied for 5,8 so on.... Hope you understood your question! I really appreciate your help.. Thanks, Bunnie
-
Carl/Rodrigo I have 10 items in my list. I want to tween first three items and tween set of next three items until the end of all items and then repeat the process once completed. You told me to call a function to add more tweens or create a new timeline for that. Currently I have the following code. But I want to tween a set of 3 at a time. Can you please show me an example how to do that... <script type="text/javascript"> $(document).ready() { CSSPlugin.defaultTransformPerspective = 600; var t1 = new TimelineMax({ repeat: 1000, yoyo: true, repeatDelay: .5 }); $('.tick').each(function (index, item) { if (index == 0) { t1.to(item, .3, { x: 20, ease: Back.easeOut }); t1.to(item, 0.4, { x: 0, ease:Back.easeOut, opacity:50 }) } else { t1.from(item, 0.7, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut }) } }); }); </script> Any help will be greatly appreciated. Thank you! Thanks, Bunnie
-
Thank you Carl!! I understand. Please answer the below question: t1.from(item, 0.8, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut }) For the above, I want it to slide first in the x direction(x:100) and then transform. It directly transforms but doesn't slide before that. Does slide doesn't work with rotation or Is there a mistake in the code? Thanks & Regards, Bunnie
-
Hello All, I am using a repeater to display items from a database. What I would like to do is: 1.slide in first item 2.add transformation for second item 3. add a different transformation to the third item After three items have been displayed I want to fade out first three and display next three items. and I want to repeat this process in a loop.. Here is my code: I am stuck in between. I am very new to the web development and GreenSock. Any help will be greatly appreciated! CSSPlugin.defaultTransformPerspective = 600; var t1 = new TimelineMax(); $('.tick').each(function (index, item) { //console.log(index, item); if (index == 0) { t1.to(item, .5, { x: 100, ease: Elastic.easeOut }, "+=0.5"); } else if(index == 1){ t1.to(item, 2, { throwProps: { x: 200 } }); } else { t1.from(item, 0.8, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut }) } }); t1.play(); Thanks & Regards, Bunnie
-
Thanks a lot Rhernando!! This really helps.