mk1

Scroll content on area hover in 2 modes

Recommended Posts

Hey Guys,

 

I want to recreate the solution from here using GSAP: 99designs.com

 

Just wanted to ask about what GSAP plugins would you use here for the smoothest animation.

And I wondered if simillar subject were already explored at our forum. 

I was wondering about the 2 hidden divs approach ( see attachement ) but maybe a beeter apporach would be to trigger event based on the amount of space between screen edge and cursor ( calc. in JS ) . WHat's your opinion?

 

Best regards,

Nick

 

Screen Shot 2017-12-04 at 19.32.47 (1).png

Share this post


Link to post
Share on other sites

If you put invisible clickable elements on top of the carousel it will prevent you from clicking on the elements in the carousel so I think it might be better in this case to determine speed based on the x position of the cursor.

Share this post


Link to post
Share on other sites

Here is the demo. You should be able to refactor it and make it reusable on multiple containers. Also, some calculations can be done differently but this should work for you.

 

 

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites

Wow, Sahil. Nice work. Thanks for putting so much time into that.

  • Like 2

Share this post


Link to post
Share on other sites
Quote

Wow, Sahil. Nice work. Thanks for putting so much time into that.

 

:D thanks, it was headache. After seeing Blake's jQuery Plugin School certificate, I am looking forward to getting my GSAP Draggable School certificate.

  • Like 1
  • Haha 1

Share this post


Link to post
Share on other sites

Wow Sahil, that looks great! Thanks a lot. I didn't expect so much help from you guys. Much appreciate :)

  • Like 1

Share this post


Link to post
Share on other sites

Hey Guys, 

 

based on @Sahil solution I came up with a simple jQuery plugin. Feel free to post any thoughts or fixes. It's not yet finished, but Sahil's functionality is already implemented.

 

Quick question, I can see some issues while Pressed and Mousemove same time, how can I make those two play nice together with draggable plugin?

 

Quick question no.2 , I want to disable draggable for non touch screens, should I use a modernizr for this or GSAP have some plugin to make this work as well?

 

 

Edited by mk1
added quick question 2
  • Like 1

Share this post


Link to post
Share on other sites

That looks like you have done a lot of work. Are you planning to make it a plugin or just planning to use it on your site? One curious question, did you understand all the code?

 

Well I have never created jQuery plugin and not sure if you need it to do it. Right now, if you duplicate the html, it just creates two slides that respond to each other so most probably you will have to rework everything. Here is how I had created a reusable function for another project. Though default values should be checked for 'undefined' instead of using OR operator.

 

I don't know why it is behaving differently in your implementation, are you sure you copied everything? If you check my demo, it works without issues. I will take a look at it once you rework it.

 

As for touch, I don't see any good reason to disable draggable for touch non-touch devices. If you change the cursor, user won't even notice it. I personally think it is good think to give user more options to interact rather than taking it away. In fact, I didn't know the original site was draggable on mobile. I just made demo with draggable as additional feature.

Share this post


Link to post
Share on other sites

I wanted to practise building a jQuery plugin with more advanced concepts, so once you have invested so much time into creating that solution I thought I will go a little bit further and provide it in an easy to implement version for our GreenSock community.

 

So in order to answer your question: Plugin is not a must here, but I always preffer to learn on real life examples.

 

I had some issues with understanding your code, as I am not very familiar with GSAP docs, but after some digging I was able to solve the issues that I had at the beginning.

Okay, I will check your demo once again to check if I didn't forget anything.

 

I forget about one thing, I want to have on hover effect on each card, that's why I am thinking about disabling draggable for non-touch screens.

 

Share this post


Link to post
Share on other sites

@Sahil I can see now what you mean with multiple instances. True is that draggable works for all at once. Mouseevents does not. I think there is an issue in .create where I do not understand why you use '<div />' instead of some id or class in example.

 

As I can see in the console, plugin is initilized properly. Each time per wrapper with the right className

Share this post


Link to post
Share on other sites

Well that's just proxy target, so you don't have to use any extra html or use CSS to hide it, but I don't think it should be an issue.

 

I had created video tutorial on it couple of weeks ago, see if it helps you. It explains the draggable part only, it's my first tutorial ever so I am not that fluent.

 

The reason why both carousel respond to drag is, probably you are not isolating them. Plus I don't think using Modernizer would be good idea, because it just increases dependencies. @OSUblake can suggest what will be best approach to implement it as plugin/prototype. Plus he can also suggest what will be best approach to enable/disable draggable for touch devices.

  • Like 1

Share this post


Link to post
Share on other sites

Hello @mk1

 

When @Sahil uses that "<div />" in the Draggable create() method. That can be done because @Sahil has jQuery included. And the Draggable.create() method accepts a CSS selector or a jQuery object. In jQuery, a self-closing tag as a selector "<div />" tells jQuery to create a new DOM node (element). So in this case it is being created just as a proxy for Draggable. ;)

 

https://greensock.com/docs/Utilities/Draggable

 

Quote

This will simply find the element with the ID "yourID" and make it draggable with no bounds or any kinetic motion after release. You don't need to use selector text either - you can pass the element itself or a jQuery object.

 

Happy Tweening! :)

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

BTW have you created plugins before? Just guessing, it can happen that both instances are referencing same variables, it had happened with me. If not I will suggest to start with something really small and simple example, once you are sure your implementation is working then you can start working on this. Otherwise you will end up spending endless time on figuring why something isn't working.

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

@Sahil I did, but not with this boilerplate. I tried to stick to the description I found on the web and maybe some info from that article mislead me a little bit.

Still, I am going to do in depth debuging in order to fully understand what's going on under the hood. I thought I know, as you can see I was wrong :)

 

I did many simple examples, that's why I wanted to make the next step :), well... it's still a progress :D

  • Like 1

Share this post


Link to post
Share on other sites

@Jonathan I don't see any extra div created in @Sahil example after init of JS function, am I missing something?

Share this post


Link to post
Share on other sites

It's created but only on DOM tree, not visible in HTML. If you watch the video you will see what I am doing. It is like creating a element but never putting it in HTML. And trust me, it is least you have to worry about.

  • Like 1

Share this post


Link to post
Share on other sites

@mk1 .. Yes since its just a proxy element, it is created in the DOM by jQuery, but is hidden by GSAP like @Sahil said above. You can find more about how jQuery creates DOM nodes when a self-closing tag ("<div />") is used as the selector. If jQuery was not included, then you would have to create the proxy element yourself with createElement().

 

http://api.jquery.com/jquery/#jQuery-html-ownerDocument

 

Quote

If the HTML is more complex than a single tag without attributes, as it is in the above example, the actual creation of the elements is handled by the browser's .innerHTML mechanism. In most cases, jQuery creates a new <div> element and sets the innerHTML property of the element to the HTML snippet that was passed in. When the parameter has a single tag (with optional closing tag or quick-closing) — $( "<img />" ) or $( "<img>" ), $( "<a></a>" ) or $( "<a>" ) — jQuery creates the element using the native JavaScript .createElement() function.

 

:)

  • Like 2

Share this post


Link to post
Share on other sites

@Sahil Everything was working fine, I had a spelling mistake on line 283, where I was calling all carousel elements globally:

    TweenMax.set("." + defaults.singleSlideClass), {
      x: "+=" + plugin.$diffX
    });

and I had to change it to:

TweenMax.set(plugin.$slides, {
      x: "+=" + plugin.$diffX
    });

where:

var plugin = this;
plugin.$slides = this.$element.find("." + defaults.singleSlideClass);
  • Like 1

Share this post


Link to post
Share on other sites

About touch screens, you CANNOT detect one, so don't try.

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

 

I come across so many sites that break on my computer because I have touchscreens and assume I'm using one, when I'm really trying to use my mouse.

 

Touch can be determined by the event type. Here's a good article on the subject.

https://developers.google.com/web/fundamentals/design-and-ux/input/touch/

 

  • Like 4

Share this post


Link to post
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.