Search the Community

Showing results for tags 'slideshow'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 22 results

  1. shmdhussain

    CrossFading slideshow using GSAP

    I tried the CrossFading slideshow demo as in this url, I tried in the codepen using GSAP but I am able to achieve it using hardcoding the number of images using nth-child, In my scenario number of images is variable. Is it any way to achieve it better using GSAP than this. Thanks in advance for any help
  2. Gubbels

    Different text displays on hover

    Hi First what I want to do. I have a slider with 4 pages and depending on the page I'm on, when hovering over a pre-specified element I want some text to display. This text is otherwise (when not hovering over the element) hidden. I've been thinking about ideas how to do it and thought about something and I'm wondernig whether it's possible. I give my "dots" (as seen below) <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> a css active state and then display the appropriate text depending on which "dot" is active? If that wouldn't be possible, how else could I achieve this? So far I only was able to display the text, which is otherwise hidden, when hovering over the pre-specified element. All help is appreciated! Thanks in advance!
  3. Gubbels

    mouseover event

    Hey, I'm kind of struggling right now and I'm not quite sure what to do. I'm using simple divs as an example but I'm actually using an svg looking like this --> <svg version="1.1" id="martini" xmlns="" xmlns:xlink="" x="0px" y="0px" viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve"> <g id="olive" class="oliveScale"> <line class="st0" x1="441.7" y1="187.6" x2="355.5" y2="322.2" /> <ellipse transform="matrix(0.5395 -0.842 0.842 0.5395 15.3108 456.2295)" class="st1" cx="424.7" cy="214.1" rx="14.2" ry="20.8" /> <path class="st2" d="M432.3,230.5c4.3-0.3,7.9-2,9.9-5.1c2-3.1,2.1-7.1,0.5-11.1L432.3,230.5z" /> <ellipse transform="matrix(0.5395 -0.842 0.842 0.5395 -13.7086 454.2149)" class="st1" cx="408.4" cy="239.6" rx="14.2" ry="20.8" /> <path class="st2" d="M416,256c4.3-0.3,7.9-2,9.9-5.1c2-3.1,2.1-7.1,0.5-11.1L416,256z" /> </g> <path id="stem" class="st3" d="M287.1,413.8c0,0,3.6-2.4,2.9,3.9c-0.7,6.3,3.6,188.5,3.6,188.5l-60.5,15.3c3.6,3.6,64.5,0,64.5,0 s53.9,3.2,63.3,0.6c0.5-0.1,0.4-0.8,0-0.9L302,606.2c-0.2-0.1-0.4-0.2-0.3-0.4c0.2-8.9,4.3-182,3.6-188.1c-0.6-5.2,1.8-4.5,2.6-4.1 L287.1,413.8z" /> <path id="gin" class="st4" d="M174.7,286.4c39.8,46.3,112.4,127.4,112.4,127.4l20.9-0.2c0.2,0.1,0.4,0,0.5-0.1 c4.6-5.1,73.7-82.4,112.1-127.2H174.7z" /> <path id="vermouth" class="st5" d="M420.6,286.4c15-17.5,25.3-30,25.3-31.4c0-4.8-4.4-6.3-5-6.5c0,0-0.1,0-0.1,0H154.4 c0,0-5.1,1.5-5.1,6.6c0,1.4,10.3,13.9,25.3,31.4H420.6z" /> </svg> As shown in the Codepen, I have a slider with two different divs in them, here's what I want to do. Once I hover over the div box that's NOT colored black, I want the black div box to move to the left and the other div to scale to ~1.3 and move to the right. I'd know how to target more than one element using querySelectorAll but how do I give different animations to the elements I'm targeting at once? Thanks in advance for the help and advice.
  4. Hi y'all. I need some help here with my current project for university. Here's what I want to do: I created a slideshow for which I want to display animations (for example: scale on mouseover), however I want to show different types of animation based off on what slideshow page I am. Let's say I'm on slider 1 / 3 . Here I want the div box to scale:2 I'm on slider 2 / 3 . Here I want the div box to move x:200 I'm on slider 3 / 3 . Here I want the div box to opacity:0.2 The thing is I kind of know how to do it, using an if statement, but I'm not entirely sure what I have to put in between the brackets [if (HERE)] to target each slider. Thank you in advance for all the advice and help : )
  5. Hello, I am new to this forum, and at beginner level of javascript/GSAP. I am creating a looping slideshow with motion - with sliding transition. It works as intended, but at the end of the last slide, I need the first image to slide in from right to left. Now there is a gap between the last slide and the firs slide. Each slide is wrapped in a div.slide, and I create a timeline for each slide, which is added to a master timeline. My approach is to check if next slide exist or not, and then pull in the first slide, if it does not exist. nextSlide = i < totalSlides ? $(slides[i + 1]) : $(slides[0]); + slideTl.fromTo( nextSlide, 0.9, { left: 300, top: 0, }, { left: 0, top: 0, ease: Expo.easeInOut }, '-=1' ); Here is the complete javascript code. $(function() { // Slider variables var width = 300; var slides = $(".slide"); var totalSlides = slides.length; var tl = new TimelineMax({ repeat: 1 }); var slideTl; var activeSlide; var nextSlide; //slider for (var i = 0; i < totalSlides; i++) { slideTl = new TimelineMax(); activeSlide = $(slides[i]); nextSlide = i < totalSlides ? $(slides[i + 1]) : $(slides[0]);, 2, { x: -width, ease: Power0.easeNone, force3D: false });, 1, { x: -(width * 2), ease: Expo.easeInOut }); slideTl.fromTo( nextSlide, 0.9, { left: 300, top: 0 }, { left: 0, top: 0, ease: Expo.easeInOut }, "-=1" ); tl.add(slideTl, "slide-" + i); } }); and here it is on codepen:
  6. bennyboy1978

    Need help with Slide show and splittext

    I've customized a slideshow and I'm using splittext to animate text out the current slide and then animate back in the new one. It works perfectly when "Next" is clicked but I'm having trouble with "Previous". The header's going out as planned but new one's aren't coming back in.
  7. jh-thank-you

    VueJS and GSAP - Making Components

    GS Community, I am in the process of rebuilding a GSAP website into a Vue.js project. I am in the very early stages of learning Vue, here is a good, free, video series and here is a very good (but it cost 10 dollars) Udemy course. My hope for this thread is to build out a full GSAP & Vue App. I will break out each component as I go and place it in a codepen (I have quite a few things done already, it will take me some time to go back and break things out). This will be a work in progress and the codepens will be updated in phases: Phase 1: will be to get just get things wired the Vue way. Phase 2: will be to use GSAP for the animations and transitions etc. Phase 3: Build everything as dynamic/reusable components. If all goes well this will turn into a Vue/GSAP component library of sorts for everyone to reference. Blake, one of the GreenSock Moderators, has graciously offered to help guide me (Thank you Blake). Goals for the thread/project: Navigation Button Component Section Content Component Section Hero Image Component Section Thumbnail/Modal Button Component Modal Component Password Modal Component Vertical Slideshow Component (I will also to help others build out a Horizontal Version). Slide-up Tab Component Radial Button/Checkbox Form Filtering based on a sector/classname (with persistence via local storage or a Vue method, if it exists - learning as I go ) All of the above is built in a non-Vue way here Note: that only the print/advil, print/amex, print/bayer slideshow content is sorted, all the other thumbnails will load a blank modal. This site has performance issues and at times the javascript, loaded via a Djax call, for the thumbnail buttons to launch the slideshow content is not binding properly. These issues and some prodding by Blake have made me venture down the Vue.js path. Side note: I'm learning, not there yet, to do things a DRY way; hopefully under Blake's guidance I will finally get this under control and tighten up the spaghetti code that I currently have. Okay, so that's the setup. Next post will be some useful links and a current state/NOT simplified codepen of the current Vue app.
  8. Joseph Levin

    Simple MorphSVG slideshow problem

    Hello everyone! I'm new to GSAP, and maybe I'm just tired at the moment and not seeing things clearly, but I'm having a lot of difficulty with a simple slideshow using the GSAP MorphSVG plugin. In my pen I have a series of <svg> elements defined which, when the .svgbox the svgs are held in is swiped left or right, morphing is supposed to occur. Basically, on a "touch swipe" (or a "drag" with the mouse), I determine the "firstSVG" and the "secondSVG" that the firstSVG is to be morphed into. This seemed to work perfectly when swiping "left", but when swiping "right", I ran into some issues with the morphs not occurring. This line taken from my pen (under the portion of the code that handles a "right" swipe) seemsto be part of the problem: firstSVG=$(slideArray[currSlideIndex-1][0]); //index within array should be currSlideIndex rather than currSlideIndex-1. Magically, it works. I originally had this line to be: firstSVG=$(slideArray[currSlideIndex][0]); such that the currSlideIndex, firstSVG and secondSVG values were adjusted properly (but the morphs don't act as expected). When I set the code to be as it is currently: firstSVG=$(slideArray[currSlideIndex-1][0]); The firstSVG and secondSVG values come up at times as being the same value (but the morphs work fine in either swipe direction). I'm at a loss and would greatly appreciate any help anyone could provide. PS: Clicking on "run pen" will show the pen more as it is expected to be seen. The very bottom of the purple box showing the firstSVG and secondSVG values is cut off in the embedded pen for large browser sizes. Please resize your browser a bit to see the entire content or open it up on Codepen to see what I'm asking about. Thank you very much, in advance. -Joe
  9. gram3000

    Looping overlapping slides

    Is it possible to write this static timeline, with a set number of slides, to have any number of slides? Thanks the help, Graeme
  10. Matheus Verissimo

    Tweenmax slideshow plugin

    Hello guys. I created a basic slider plugin using TMtimelinelite, simple use for create animations, please check and evaluate and report bugs. Liver version Thanks!
  11. alexpi

    Slideshow cycle with TimelineMax

    Hello, I need to make a slideshow that is part of a larger animation. The images need to fade in-out, move and scale in parallel. I achieved that effect, but my problem is that I can't repeat the cycle using the same motions, the transition from the last image to the first is abrupt. Any suggestions? EDIT: I searched the forum, and found some solutions with TweenMax, ( but I don't know if the moving and scaling effects are possible using those. Thanks
  12. I am trying to create a basic "floating" slideshow like the floating style screensaver that ships with all Macs. If you don't have access to a Mac the effect looks close to this: Key features: Multiple layers of posts. Barrel roll effect — every time I try this it looks like a flat screen being stretched in and out. Callback function for loading in a new tile every time one is animated out. Apologies, I'm a newbie here. While this should be pretty darn simple I can't get started on it. Can someone point me in the right direction here? Thanks much.
  13. I'm currently trying to build a slideshow to practice whatever I learn about Greensock. Most things behave as expected, except for when I click next/prev real fast. In that case the slideout animation never gets fired, and the next time I reach the same slide, everything is already animated. What would be the best way to prevent this from happening? Thanks! Small edit: Got the same with this pen:
  14. schtals

    Loop a staggerTo [basic banner]

    tl.staggerTo ([f1, f2, f3, f4, f5], 0.15, {opacity: 1}, 5 ) function loop() { tl.restart(); } I am another designer moving from Flash to code-controlled animations. New to JS, but can white CSS freely. Need some assistance. Simple banner: 5 images following each other. Im using TimelineLite and staggerTo. How do I loop the sequence? -- Thank, you. schtals
  15. Hi, I am having a bit of trouble with this script we have been working on. Trying to get the Pagination to work in sync with the next/prev and auto rotate slider. Here is our script. Any help is appreciated. $(function(){ var $slides = $(".slide"); var currentSlide = 0; var slideDot = 1; var stayTime = 10; var slideTime = 1.3; var numberOfSlides = $slides.length -1; TweenLite.set($slides.filter(":gt(0)"), {opacity:0,display:'none'}); TweenLite.delayedCall(stayTime, nextSlide); function nextSlide(){".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0});"#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = ++currentSlide % $slides.length; slideDot = ++slideDot % $slides.length; $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); TweenLite.delayedCall(stayTime, nextSlide); } $('.go-next').click(function() {".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0});"#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = ++currentSlide % $slides.length; slideDot = ++slideDot % $slides.length; $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); }); $('.go-prev').click(function() {".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0});"#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = --currentSlide % $slides.length; slideDot = --slideDot % $slides.length; $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); }); $('.banner').mouseenter(function() { TweenLite.killDelayedCallsTo(nextSlide); }); $('.banner').mouseleave(function() { TweenLite.delayedCall(stayTime, nextSlide); }); for(i = -1; i < numberOfSlides; i++) { (function() { var slideIndex = i; var slideLabel = i + 1; var x = $('<a id="slide' + slideLabel + '"href="#" class="paginatorLink"><i class="material-icons"></i></a>'); {".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0});"#slide" + slideLabel, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = slideLabel; $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); TweenLite.delayedCall(stayTime, nextSlide); }); $('.pagination').append(x); })(); } });
  16. Shaun Gorneau

    GSAP for digital signage

    So I've been a huge fan of GSAP for a long time. I've recently had the idea to create a complete web-based digital signage platform using Drupal as the CMS behind the scenes ... and GSAP's timeline is perfect for handling this type of sequencing. I have the system built and it runs absolutely perfectly (in terms of how I want it to run). It allows for video, image slideshows, and iframes for "slides" (timeline items). All "slides" fade in for a second, remain "on" for a determined duration, and then fade out for 1 second. For video, the "duration" (in seconds) of the timeline item is set to the duration of the video (in seconds) by simply animating the top to 0 for that duration (the top is already at 0). For iFrames, it set to a value in the CMS. For slideshows, there is no need to set a duration since the stack of <img>s are set to staggerTo modifying the autoAlpha property. Images are loaded as is on the page load, like this <div class="image-slideshow slide" id="social-dining-febmarch-9-slideshow" style="z-index: 92;"> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B4.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B5.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B6.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B7.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B12.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B13.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B14.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B16.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B17.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B19.jpg" /> <img src="http://localhost/sites/default/files/slideshows/FebMar2015-MemberNews1.jpg" /></div> And the timeline setup for this particular slideshow var SocialDiningFebMarch9SsTl = new TimelineLite(); SocialDiningFebMarch9SsTl.staggerTo( "#social-dining-febmarch-9-slideshow img", 1.5, {autoAlpha:1}, 7 , "SocialDiningFebMarch9Slideshow" ) .to( '#social-dining-febmarch-9-slideshow' , 7 , {top: 0} ) // adds time to last slide .to( '#social-dining-febmarch-9-slideshow' , 1 , {autoAlpha: 0} ); video is loaded on demand as to not overload the browser with video data by outputting something like this <div class="video slide" id="your-time-ad-10-video-wrapper" data-src="http://localhost/sites/default/files/videos/original/YourTimeFade.mp4" data-bkgd-audio-level="0" data-frgd-audio-level="1" style="z-index: 91;"> </div> And when the video's timeline is active, I use the onStart callback for the timeline item to dynamically create the video element and its attributes with the attributes on this "placeholder" div element. When the timeline is done, the video element is destroyed. The iframe content follows a similar pattern to video. The first run can be a little rough without a solid broadband connection as it downloads and caches content, but subsequent runs are nice and smooth. My big question is ... and I don't think this is a GSAP problem, but I know there are a lot of smart people on here , this thing runs great loop after loop but then all of a sudden will just freeze. It could be 30 minutes in, or 3 days in. This happen in both Safari and Chrome in OS X and is inconsistent in terms of where/when it decides to crash. I'm keeping a global variable to count how many times the master timeline is played and I refresh the browser after 3 runs. This 1) allows new content to be displayed in the presentation on a regular interval and 2) allows the browser to clear it self out (or so I thought) from a Javascript standpoint. This runs on a dedicated Mac Mini (2.5GHz i5 with 8GB ram) hooked up to a transcoder for broadcast at a cable station's headend. I have tested on a local Mac Mini (i5 2.3GHz with 16GB ram), on a local MacBook Air (1.7 i7 with 8GB ram) and in all cases it runs great, until it doesn't. In all cases video is MP4, there is an MP3 audio track playing until it is instructed to stop for video and then resume when that video has finished. I'm just wondering if there is anything I could be doing from a Javascript standpoint to optimize this so that it runs as well it's 100th time as it does its second time. Here is a URL to look at how this is all running (only tested in Safari and Chrome). ***The initial load will take some time for the first video (probably) which will cause the slide to terminate what appears to be prematurely. I will be addressing this soon by making the sub timeline pause/play in sync with the status of the video. *** This is setup for HDTV broadcast at 1080p ... sizing your browser window to that aspect ratio will yield the best results in terms of layout. Any thoughts would be greatly appreciated!
  17. Hi there guys, just downloaded the GSAP package yesterday and been reading through the docs. I have a project I want to work on involving an interactive comic book, and I'm just wondering how difficult it may be to implement. I'm somewhat of a newbie at Javascript, covered things like AJAX and some interactivity through JQuery UI, but have little to no experience in animation. I am essentially looking to create a full page sideways slideshow that activates a different series of animations whenever a new slide is opened. Looking at this example here on Chrysto/Bastas page it is definitley doable, but whenever I try changing it to have horizontal transitions rather than vertical, I break it, and wouldn't even know where to begin activating animations on each seperate slide. Would any know how I could get on the right track?
  18. Hi I have a slideshow and it's good in all browsers except in chrome the animations are very laggy and slow and the speed is around 5 fps !! Here is my slider function : function slide() { var rule = CSSRulePlugin.getRule("#sctrl table"); //get the rule if (scId == 1) {var color = "#2a2a2a"} else {var color="#f2f2f2"}; if (scId < currentslide) {"#sc", 0.9, {left:scId * 45, ease:Power1.easeIn});'#slide' + currentslide, 0.9, {left:'100%', ease: Power2.easeInOut});'#st' + currentslide, 1.2, {left: '100%', ease: Power2.easeIn});'#slide' + scId, 0.9, {left:'0', ease: Power2.easeInOut});'#st' + scId, 1.2, {left: '11%', ease: Power2.easeIn,onComplete:defaultslide});, 1, {cssRule:{borderColor:color}, ease: Power2.easeIn});'#sc', 1, {backgroundColor: color, ease: Power2.easeIn}); } else {"#sc", 1.1, {left:scId * 45, ease:Power1.easeIn});'#slide' + currentslide, 1.1, {left: '-100%', ease: Power1.easeInOut});'#st' + currentslide, 1.3, {left: '-=100%', ease: Power1.easeIn});'#slide' + scId, 1.1, {left: '0', ease: Power1.easeInOut});'#st' + scId, 1.3, {left: '-=89%', ease: Power1.easeIn,onComplete:defaultslide});, 1, {cssRule:{borderColor:color}, ease: Power2.easeIn});'#sc', 1, {backgroundColor: color, ease: Power2.easeIn}); } } the #slide is photos and the #st is the slide's text on the photos and #sc is a slide control for switching beetween slides. I recall this function every 6 seconds (except the first time that is 4 seconds) with this code : TweenMax.delayedCall(4, slideauto); function slideauto () { var slider = new TimelineLite(); if (scId==2){ scId=-1; } scId++; slide(); TweenMax.delayedCall(6, slideauto); } at first I thought it might be because of the large photos but it didn't make any change when I replaced the background photos with background color. then I removed this line of my code and the speed a little improved ( like 15 fps) but it's still too slow., 1, {cssRule:{borderColor:color}, ease: Power2.easeIn}); I want to know how can I optimize my code to run faster and smoother in every browser. Thank you.
  19. I wonder, it's this possible. I've been reading about how good is this platform and I also read about how this plugin could improve performance even though it's a JQuery native code.
  20. Hi, I have been struggeling figuring out a simple slideshow using next and previous buttons. Currently I have a slideShow container with 4 movieclips arrranged next to one another. Essentially what I would like is have the slideshow cycle through the 4 slides in the slideshow container and have a next and previous button executable at anytime, but I have no idea on how to accomplish this. This is what I have at the moment: import com.greensock.*; import com.greensock.easing.*; var timeline:TimelineLite = new TimelineLite(); timeline.append( new TweenLite(slideShow, 0.5, {x:"0"}) ); timeline.append( new TweenLite(slideShow, 0.5, {delay:2, x:"-280"})); timeline.append( new TweenLite(slideShow, 0.5, {delay:2, x:"-260"})); timeline.append( new TweenLite(slideShow, 0.5, {delay:2, x:"-260"})); Any help is highly appreciated! Thanks, Dada
  21. paulbr

    slideshow with controls

    I have a short slideshow with animated slides. I'm trying to have some buttons call up each slide as they are clicked but I'm having trouble getting the buttons to function. I suppose I am having difficulty understanding how to apply labels and how to skip to those labels in the timeline from a click. Does anyone know of a tutorial that covers this kind of stuff? Thanks.
  22. Hi I am working on an AS3 slideshow developed with TweenLite10 I need to be able to pause/resume the slideshow Is there an example/tutorial explaining how to add TweenMax10 pause() / resume() functionality to a project? Thanks