Jump to content
GreenSock

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

GSAP Slider with preloader

Recommended Posts

I created this demo which shows a slider with a preloader. The GSAP slider is completely out of sink and doesn't slide on time. 
How can I load the images and the slider together? It would be nice to have this function working together nicely.
Also the fading on the images are a bit glitchy . I might have used to many alphas.

See the Pen mXjqJJ?editors=1010 by davide77 (@davide77) on CodePen

Link to comment
Share on other sites

There seem to be a lot of problems with that codepen demo. Open the console and you'll see there are a bunch of JS-related problems (not related to GSAP). 

 

There are almost 200 lines of code (not including CSS and HTML) - are you hoping someone will diagnose all the problems and provide solutions? We really try to keep these forums focused on GSAP-specific questions. The more isolated/reduced, the better. You'll have the best chance of getting an answer if you try to strip down your demo into the smallest pieces possible and then ask a GSAP-specific question. I really wish we had more time to provide free general consulting services, but unfortunately we just don't have the bandwidth. Well, perhaps someone else has the time and interest (I hope they do). 

 

Happy tweening!

  • Like 3
Link to comment
Share on other sites

Hey @DD77,

 

I am sure we can get to the bottom of this if we break your issue into smaller steps. Let's start by just having a GSAP-powered image loader. Can you set a pen that only loads the image with the animated loading bar?

  • Like 1
Link to comment
Share on other sites

thanks for the demos.

 

Unfortunately we can't spend a lot of time trying to figure out how you should construct your project and do general consulting work for you.

It could take an hour or two just to dissect both examples and get an idea of how it might work.

 

As for the performance, I saw that things got considerably better after clearing the css for the mask

 

.mask-slide {
 
}

 

Again, I can't dig through 80+ lines of un-commented code with no console logs and do a deep dive into what's happening based on timers and various conditions at a certain time. Like you mentioned though, I highly suspect that if you are doing many opacity / alpha changes on large images simultaneously that is probably causing the biggest rendering struggle (un-related to GSAP).

 

If you have performance problems with any of the transitions you should create a reduced demo that just has a single transition between 2 images. Nothing dynamic. Just the most basic example of the GSAP code that you need help with.  

 

If you find that the timing isn't accurate, look into replacing your setInterval() with delayedCall(). delayedCall() runs in perfect unison with all GSAP animations. https://greensock.com/docs/TweenLite/static.delayedCall

 

 

  • Like 3
Link to comment
Share on other sites

Oh @DD77... You really make it hard for us to help you. :(

 

I know it sounds wingy but you need to make a bit more of an effort to make it easy for people to look at your code. You need to make as simple as you can otherwise you won't get attention. We only have so much time to spend around here that we cannot afford an hour or two going over one person's code if there is four or five others with questions and a much smaller code base to look at.

 

Also, by making it as small as an example you can, you will probably end up seeing ways of simplifying your own code.

 

You didn't even change the title of the pen... One does not know which pen one is looking without refering to the thread.

 

There is so much code in both of your examples that I think your issue is that you have tangled yourself and have too many side-effects in your functions that are causing trouble.

 

Your preloader, for example:

- You have a tween inside 'loadProgress' targeting 'progressTl' - But up to that point in your code there is no object declared with a name of 'progressTl'.

- Then, afterwards, you do define a 'progressTl' with an onUpdate and an onComplete calls. Why are you returning a timeline on your onComplete? It's not doing anything that return statement. And on your onUpdate you are calling a progressUpdate but, in there you are calculating a 'loadingProgress' variable that you already had calculated in your previous loadProgress function.

 

I have no familiarity with jQuery so, I don't know what the .progress() bit is doing but I guess it is calling the given function a set  number of times. Is it calling it everytime the loading of the image updated?

 

And all of that is without even looking at your slider example...

  • Like 4
Link to comment
Share on other sites

I have to agree with the basic sentiment here your code seems awfully convoluted for what you are trying to achieve. I'm sure there is a logical construction here but it's pretty hard to trace all the interactions and figure it out without spending a lot of time studying it. I might suggest maybe strip out all the functions and constructors just try to make a simple timeline or set of tweens that achieves the animation you want successfully then figure out how to layer on the additional functionality. 

 

I've looked at this a couple of times but each time I decided as others have that I wasn't going to sink an hour or two of my time deconstructing what you've done before I can even get to helping out. 

  • Like 1
Link to comment
Share on other sites

Ok, enough with the bolloking please. I know all the above And I will try my best to remove or improve it. The thing is that if I was that good to make it as you say I was probably able to do it myself without asking for advises or help. I appreciate all your suggestions though. 

Link to comment
Share on other sites

Quote

The thing is that if I was that good to make it as you say I was probably able to do it myself without asking for advises or help. 

 

I think you are that good, you've just got yourself tangled up. Reduce your slider to just a simple timeline animation, then we can help you solve your performance issues. Then you can abstract it into functions and whatever you need for added functionality, and probably at that point people here may be able to give advice on how to do that as well once we understand what you're doing.

  • Like 1
Link to comment
Share on other sites

2 hours ago, Dipscom said:

I shall take on the mantle and see this issue resolved! May the GODS bless me with wisdom to navigate the darkness!

It will also be a very long journey with very small steps.

 

You're a good man @Dipscom. May these brownie points motivate and nourish you on your noble quest. Safe travels my friend.

 

P7lDr28.jpg

  • Like 2
  • Haha 4
Link to comment
Share on other sites

Quote

I created this demo which shows a slider with a preloader. The GSAP slider is completely out of sink and doesn't slide on time. 
How can I load the images and the slider together? 

1

 

One of things I was never sure about in this post is the need for the preloader. Typically in a slider/slideshow I load the assets for the first slide with the page, and defer loading the other assets until after that slide has been rendered. Since most slides remain on a page for at least a few seconds that is usually plenty of time to load other assets before the second slide needs to appear.

 

I don't have time to make a pen right now but the code below shows CSS, HTML and JS for how I do it with background images. 

 

 

//CSS

.myBackground.loaded{background: url...}

//HTML

<div class = 'myBackground load'></div>

//JS call function when needed 

loadBackgroundNow($('.myBackground'),'load');
                  
//HTML CHANGED TO

<div class = 'myBackground load loaded'></div>                  


function loadBackgroundNow(item,targetClass){
  item = $(item);
  //console.log(item);
  if(typeof targetClass === 'undefined'){
    item.addClass('loaded');
  }
  else{
      if(item.hasClass(targetClass)){
        item.addClass('loaded');
        }
      var childTarget = item.find('div.' + targetClass);
        if(childTarget.length > 0) {
            childTarget.addClass('loaded');  
      }
  }
}

 

Link to comment
Share on other sites

Quote

I shall take on the mantle and see this issue resolved! May the GODS bless me with wisdom to navigate the darkness!

 

Ye tread where others are afeared to go. 

Link to comment
Share on other sites

Great job, Dipscom. Looking forward to following along.

  • Like 1
Link to comment
Share on other sites

The first step into the darkness...

 

Already demons of failure assault me. The bar doesn't start moving until too late, the actual code doesn't seem to work outside the debug mode of codePen - I imagine it is their order of loading, the JS doesn't run until all the other elements have loaded and so, ruins this version of it.

 

And this is already far more convoluted than I expected this to be...

 

 

Let us see what the next room in this dungeon will bring.

 

@PointC I thank you for the encouragement and the brownie points. You know I am keeping tabs on them and one day I shall come to your door collect.

 

@Visual-Q Aye! A man has to got to do what a man has got to do. And nowadays, a man has got to do also what a woman has got to do.

ps: Lovely comment on how you defer loading your background images. I never thought of such simple thing. Great to see others chip in with their ways of doing things. We all end up learning a thing or two.

 

  • Like 2
Link to comment
Share on other sites

Sooooo... I now have to create a loader and a image slider myself for a project I am working on.

 

Let's us combat this Hydra together and chronicle it here (and in a blog post somewhere when I find the time) !

 

Stay tuned!

Link to comment
Share on other sites

  • 2 weeks later...

And we enter in a new room in this dungeon of discovery... Although the initial battle with the loader has not gone as hoped, the one against the slider has not been too bad.

 

Here is something I managed to whip up from this big project I am working on:

 

 

The original one is a carousel - I am striping some bits out from it to make it simpler. Again, when I get some downtime I will work a bit more on this and report back.

 

Same with the loader... I will eventually have to build an asset loader for the site anyway so, I'll adapt it to a more generic setup and post it here.

 

We'll get there, folks!

  • Like 3
Link to comment
Share on other sites

@Dipscom I'm curious about your loader requirements there are different ways a loader could be handled defined mainly by the input requirements. For instance is it part of a content management schema with client introduced content?  How do you envision it working?

 

And are you talking about a generic content loader or asset preloader?

Link to comment
Share on other sites

8 hours ago, Visual-Q said:

@Dipscom I'm curious about your loader requirements there are different ways a loader could be handled defined mainly by the input requirements. For instance is it part of a content management schema with client introduced content?  How do you envision it working?

 

And are you talking about a generic content loader or asset preloader?

 

Oh noes! You have found the kink on my armour!

 

The reaction to your question: ~ What is he even asking? I don't know!?!?!  ~

 

What I am going to have to build - excuse my language if that's not the correct one - is the little distracting thing that distracts you while the browser does its thing while talking to the server. Which, I assume, is helpful to our DD77 colleague here.

 

If you have insight to offer, I am all ears. And eyes. :)

 

Link to comment
Share on other sites

@Visual-Q, Dude thanks for taking notice of my post here... 
What I'm after is a SLIDER, simply a slider in gsap. I build something with a preloader, which is using a imagesloaded plug in. I was trying to incorporate both and make a smooth transition between a loader and the slider.  

Link to comment
Share on other sites

@Dipscom I can see the light my fried:-) 

is there a way we can integrate clickable buttons width active state like mine? 

Link to comment
Share on other sites

@Shaun Gorneau lovely!! I love golf! I need something simpler,  perhaps faiding images with no arrows, just navigation (dots). 
my one on to works almost fine, just not sure is not smooth

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×