Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'carousel'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 22 results

  1. How would you reverse the direction of this carousel loop without doing any transforms? This is one of the examples for the modifiers plugin. I tried the following but it doesn't loop the items back until all have moved -500. Probably an easy fix. Thanks. TweenMax.to(".box", 5, { ease: Linear.easeNone, x: "-=500", //move each box 500px to left modifiers: { x: function(x) { return x % 500; } }, repeat: -1 });
  2. Hi! I'm new to Greensock and I'm trying to get my head around how everything works. I'm trying to change the direction of this codepen example - I've got as far as to change += to –= but I can't work out what I need to change on the modifier so that the boxes loop. Any help is much appreciated.
  3. helloukw

    Pixi 3D Carousel

    Hello, Anyone knows how to make this codepen example in PIXI.js? The example is made using css properties. I need it to make it in PIXI and I was wondering if anyone knows how to do this. Thanks, ukw
  4. Hello everyone, I'm new and I'm just starting to use GSAP. I have a project on which I have to do a 3D carousel with a reverse perspective (called "topology star" by some people). To be clearer here is a glimpse of what I am trying to do. Currently I modify an example on Codepen but I do not see how to apply a transformation like this. Can someone help me? Thank you all
  5. I'm trying to build a tab slider that has three list items, and three associated copy block + icon. Overall...I'm not really sure where to start on this either. Ideally, when you click a different list item, it switches the content and icon to the correlating tab item and makes the List Item 100% opacity. Screenshot reference attached. I started getting the Tab "on click" working to switch with add/remove class for opacity, but when I try animating it to fade it just changes both of them. Thoughts on this?
  6. Hi Guys Can you help me to develop carousel banner with adobe animate, or i have to do it html5 code, can you guys share any sample, thank you so much
  7. Hi am a newbie in web development only 2 months in and i got inspired when i saw the Nike sbdunk website so i wanted to create something similar, the problem is that when i switch between the different categories (ie. men, women, unisex) too quickly it breaks my code, pls help. Here is my javascript. and i just uploaded to a freewebhost to show this issue https://bucco-cooporations.000webhostapp.com // menBtn menBtn.on("click", function(){ var unisex = $("#unisex"); var mens = $("#mens"); var womens = $("#womens"); if (mens.css("right") > "0px" & womens.css("top") >= "0px") { var menTl = new TimelineMax(); menTl.to($(".bod"), 1, {backgroundColor:"#cec5b9"}) .fromTo(womens, 0.6, {top:"0%"}, {top:"-150%", ease:Linear.easeIn}, 0.1) .fromTo(mens, 1.2, {right:"300%"}, {right:"0%", ease:Bounce.easeOut}, 0.1); } else if (mens.css("right") > "0px" & unisex.css("left") <= "0px") { var menTl = new TimelineMax(); menTl.to($(".bod"), 1, {backgroundColor:"#cec5b9"}) .fromTo(unisex, 0.6, {left:"0%"}, {left:"380%", ease:Linear.easeNone}, 0.1) .fromTo(mens, 1.2, {right:"300%"}, {right:"0%", ease:Bounce.easeOut}, 0.1); } else if (mens.css("right") > "0px" & womens.css("top") < "0px" & unisex.css("left") > "0px") { var mensTl = new TimelineMax(); mensTl.to($(".bod"), 1, {backgroundColor:"#cec5b9"}) .fromTo(mens, 1.2, {right:"300%"}, {right:"0%", ease:Bounce.easeOut}, 0.1); } }); // womenBtn womenBtn.on("click", function(){ var unisex = $("#unisex"); var mens = $("#mens"); var womens = $("#womens"); if (womens.css("top") < "0px" & mens.css("right") <= "0px") { var womenTl = new TimelineMax(); womenTl.to($(".bod"), 1, {backgroundColor:"#f4b4b4"}) .fromTo(mens, 0.6, {right:"0%"}, {right:"300%", ease:Linear.easeOut}, 0.1) .fromTo(womens, 1.2, {top:"-150%"}, {top:"0%", ease:Bounce.easeOut}, 0.1); } else if (womens.css("top") < "0px" & unisex.css("left") <= "0px") { var womensTl = new TimelineMax(); womensTl.to($(".bod"), 1, {backgroundColor:"#f4b4b4"}) .fromTo(unisex, 0.6, {left:"0%"}, {left:"300%", ease:Linear.easeNone}, 0.1) .fromTo(womens, 1.2, {top:"-150%"}, {top:"0%", ease:Bounce.easeOut}, 0.1); } else if (womens.css("top") < "0px" & mens.css("right") > "0px" & unisex.css("left") > "0px") { var womensTl = new TimelineMax(); womensTl.to($(".bod"), 1, {backgroundColor:"#f4b4b4"}) .fromTo(womens, 1.2, {top:"-150%"}, {top:"0%", ease:Bounce.easeOut}, 0.1); } }); // unisexBtn unisexBtn.on("click", function(){ var unisex = $("#unisex"); var mens = $("#mens"); var womens = $("#womens"); if (unisex.css("left") > "0px" & mens.css("right") <= "0px") { var unisexTl = new TimelineMax(); unisexTl.to($(".bod"), 1, {backgroundColor:"#727c86"}) .fromTo(mens, 0.6, {right:"0%"}, {right:"380%", ease:Linear.easeOut}, 0.1) .fromTo(unisex, 1.2, {left:"300%"}, {left:"0%", ease:Bounce.easeOut}, 0.1); } else if (unisex.css("left") > "0px" & womens.css("top") >= "0px") { var unisexTl = new TimelineMax(); unisexTl.to($(".bod"), 1, {backgroundColor:"#727c86"}) .fromTo(womens, 0.6, {top:"0%"}, {top:"-150%", ease:Linear.easeOut}, 0.1) .fromTo(unisex, 1.2, {left:"300%"}, {left:"0%", ease:Bounce.easeOut}, 0.1); } else if (unisex.css("left") > "0px" & womens.css("top") < "0px" & mens.css("right") > "0px") { var unisexTl = new TimelineMax(); unisexTl.to($(".bod"), 1, {backgroundColor:"#727c86"}, 0.1) .fromTo(unisex, 1.2, {left:"300%"}, {left:"0%", ease:Bounce.easeOut}, 0.1); } });
  8. Hi guys, First let me clear one thing, I have no idea about GreenSock and what I am going to ask might be sound stupid so forgive me. I have created one horizontal scroll slider (check my Codepen link) and 30 navigation dots. So what I want to exactly do is when I start scrolling the paragraph container from left to right, that should change the size of above navigation dots. Suppose, if I scroll little bit 1st dot should biggest, 2nd dot little bit big and 3rd one also little bit big and other 27 dots stay small as it is. Again, if I start scrolling from the previous position 1st dot should be little bit small, 2nd one biggest and 3rd same as 1 little bit big, and other 27 dots stay small as it is. Again, if I scroll again where I left scrollbar 1st dot and last 26 dots stay small as it is, 2nd should be little bit small and 3rd one should be biggest and 4th little bit small. This process should continue until scroll bar reach to right side. And same thing happen with reverse order too means when I start scrolling from right to left animation on dots size should applied reverse side. So I hope you guys understand what animation effect I have to show ? If you any question please let me know. I hope to get answer from you genius. Thank you.
  9. Hi, after having followed the forum, checking many examples and watching some tutorials, I have started playing with GSAP and so far it has been really fun. Now I have used Jonathan's example of the slider with controls (this one: https://codepen.io/jonathan/pen/qqmBjQ ). It worked quite well, but now I am stuck on two things. So I thought now would be a good opportunity to start posting in the forum Is it possible to have autoplay just run once and stop at the last frame? And how could I add digits that let me navigate to each slide and show which slide is active? Here is my example: https://codepen.io/lukenicktap/pen/peLreK For the autoplay I tried: function loopCheck() { $currentSlide++; if ($currentSlide < 2) { TweenLite.killDelayedCallsTo(play); } But this does nothing. If anyone could point me in the right direction, I would really appreciate it. Cheers, Lucas
  10. Hello guys, Is there a way (I'm sure there is but I do not know yet) to get the same animation in the images scrolling alternately? The top portion of the image scrolls to the left and the bottom portion scrolls to the right. Please see the url below. http://www.poigneedemainvirile.com/ My rough idea is to split the image in two and then create two handler for animations and trigger the animation at the same time. Is there better / more optimized way to do this? P.S. Been reading/studying GSAP for 2-3 weeks already. I have a bit familiarized myself with the concepts and now it's time to apply what I have learned so there are some learning curves. Please bear with me. Thanks guys!
  11. Hey, I wanted to make a slider, each slide should begin as animation example from codepen. Unfortunately, I have a problem with obtaining such an effect. Slider without navigation or dots, just interval every few seconds. The first slide should also appear with animation. I feel that the solution is very easy, and I sit on it far too long to find them. CodePen: http://codepen.io/anon/pen/mOmbza
  12. Help, help, help.... I'm new to GSAP, i need to create a one page website whereby the main section is an animated carousel via slider that look like this: http://assets.wwf.org.uk/custom/foodstory/ ​its a carousel with slider bar, that user can drag the slider to view the animation. the slider some more is need design as per example. OMG but i really no idea how/where to start with it. can i have an example to refer with? ( Please & TQVM T.T
  13. Saw this website http://www.invstr.com that uses Greensock. I was wondering how the background ticks(grey rectangles) were in a animated loop that when they past the viewport they automatically started at the top again... could that be achieved somehow with modifiers plugin like the carousel wrap example? Thanks
  14. Hi guys, I'm developing a GWD banner with a custom carousel using GSAP. I followed this simple example http://codepen.io/bassta/pen/LckBh by Chrysto. I added "prev" and "next" buttons. Sliding takes 0.5 sec for 300px of each slide, but the thing is: if user is super quick and clicks "next" button faster then .5 sec in a row, he ends up in between the slides. Because each click overwrites previous one. I tried to shorten the animation time to 0.1sec, but client wants the slide animation to be long and smooth. I tried to play with overwriting modes, but seems that it is only about killing existing animations, not keeping user from creating new ones. var current_product = 0; var products = ["product1", "product2", "product3", "product4"]; gwd.auto_Next_Arrow_tapareaAction = function(event) { var product_image = document.getElementById("product_picture"); if (current_product < products.length - 1) { current_product++; TweenLite.to(product_image, .5, { left: "-=300px", overwrite: "none", ease: Quad.easeOut }); } else { TweenLite.to(product_image, .5, { left: "0px", overwrite: "none", ease: Quad.easeOut }); current_product = 0; } };
  15. Hi, I have been trying to create an image carousel for a website, I found Greensock out of a recommendation because jQuery animations aren't as fluid, I looked at the beginner tutorials from Petr and also followed a tutorial he has on youtube, I have been having problems making the images rotate as shown in my codepen. Can someone help me please?
  16. Greetings, Is there a javascript guru out there that can help me edit my codePen? I need to totally strip out jquery and replace with gsap? I have a couple of banner projects coming up and neither ad server will allow jQuery. Any help is much appreciated as I am stuck Thank you, Renard
  17. Hi there, I'm trying to achieve some quite simple animations for my bootstrap carousel slides, but I'm not able to get them rendered at the right moment. What I want to do, is to animate the slides, which are inside its captions, for each slider image when the next image is sliding/ fading into view. Right now, the carousel is set to "pause", so that the slide effect is managed via the carousel indicators or controls. I got to work the animations for the first carousel image with a simple timeline, like so: var tl = new TimelineLite(); tl.from(".tlt", 0.5, { left: 200, autoAlpha: 0 }, "-=0.25") .from(".tlt2", 0.5, { right: 200, autoAlpha: 0 }) .to("hr", 0.5, { width: 800 }) .from(".fa-angle-double-down", 2.5, { top: 0, autoAlpha: 0, ease: Elastic.easeOut }) where .tlt, .tlt2 etc are the headings and sub heaings to animate. The problem arises, when I try to achieve animating the elements of the next slides, which are fading in by manually changing to the next slider image. I don't know how to animate them for the moment the next slider image comes into view. If I continue with the same timeline, the effects already happened before the next image was loaded. So I tried to create a new timeline, but it's the same problem. I've heard that there is the possibility to add a Label, but only could change the animation delayed in time, not when the new slide comes into view. So, finally I resort to a little, somewhat anarchical trick with an "onClick" function for each indicator. Like so: <li onclick="myFunction2()" data-target="#carousel-example-generic" data-slide-to="1"></li> and: function myFunction2() { var tl2 = new TimelineLite(); tl2.from("#it-h4", 0.5, { left:200, autoAlpha:0, delay:0.8 }) .from("#it-p", 0.5, { right: 200, autoAlpha: 0 }); } Sure, this is not the finest solution and it only works because of the carousel indicators. So what if I want to set the carousel to fading automatically, setting an interval? Does GSAP have any solution for this issue? Couldn't find any related post. Best regards, Pete
  18. Hi everyone ! Hope you are fine. I come to you because I am trying to make a carousel with images fading in / out. I decided to use opacity (maybe it's not the best way to do it) and JS. I succeed to do something with JQuery but the performance were a disaster. Made my browser (chrome) crash. Then I decided to make it with javascript and tried to realise something as light as possible (hard task). But, when I thought my algorithm was good I was in front of 2 problems : 1) I don't succeed to make it infinite (not too hard to do) 2) I have an error during a loop : Cannot tween a null target. I put some console.log everywhere at every stage but impossible to localise the moment where I am sending a null object to TweenLite. Dafuq So, as you will see in my (short) codepen, am I missing something ? I deeply thank you in advance for the time spend on my request.
  19. Hi all, I have to build a responsive full width (not height) tabbed slider with GSAP. Anyone has tried this kind of project? Any ideas will be appreciated. Thanks! neuhaus3000
  20. My carosel is not moving smooth, Can you help me to fix this. It is currently pausing, it should not pause. slider.zip
  21. hi, Can I make Carousel inside any image object ? have anyone Example for this? Or anyone who can help me in this situation. email: rabia@niche-vision.com Thanks
  22. rob83

    Simple Carousel

    Hi, I'm kind of stumped with building a very simple carousel: http://caroussell.yrnet.de/ It runs perfectly if I don't use the left and right buttons it's just a mess. Has anyone of you ever built some carousel like this and would be willing to share it? Thanks so much, Rob
×