Visual-Q
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Visual-Q
-
Simulate overscroll rubber-band effect with ScrollMagic
Visual-Q replied to katerlouis's topic in GSAP
@OSUblake could you use the scrollTo plugin here and perhaps link the scrollTo tween progress to mousescroll or perhaps scrollTop position. If it's scrolling the DOM(window) and not translating content then I don't think it should interfere with Scroll Majic triggers. I would expect they would trigger fine whether the scrollTo plugin or default behaviour was scrolling the DOM. -
Great resources, thanks!
- 18 replies
-
- 1
-
-
- timeline
- javascript
- (and 4 more)
-
Unfortunately, that was the last gold badge I had in stock. They are custom made in a monastery in the Himalayas and transported on the Silk Road to Istanbul where they are put on carrier pigeons that island hop across the Atlantic. It takes several months. I'm going to try and source a local supplier, I'll let you know when yours comes in.
- 18 replies
-
- 4
-
-
- timeline
- javascript
- (and 4 more)
-
I didn't mean it does what scroll majic does as far as triggering and such, just that what it does in this usage case replaces the need for it which is great, I've been wondering for a while about how to apply gsap to parallax effects without needing Scroll Majic and pins but never got around to figuring out how to implement it. Simple as it may be your function can do a lot especially if you add some input parameters and additional logic to fine tune control. So gold badge it is.
- 18 replies
-
- 3
-
-
- timeline
- javascript
- (and 4 more)
-
Gold badge for Shaun, he eliminated the need for an entire framework with one function: $(window).scroll( function(){ var curScroll = $(window).scrollTop(); if( curScroll > 0 ){ rocketTween.progress( curScroll/scrollMax ); } })
- 18 replies
-
- 1
-
-
- timeline
- javascript
- (and 4 more)
-
Awesome Shaun, now I don't have to figure out how use Scroll Majic pins which seem very unforgiving.
-
Hey @PointC were you actually able to solve it this way. I considered this thinking possibly it was screwing up the scroll majic trigger but getting rid of margins and padding didn't seem to solve the jump I'm seeing when you scroll for the first time if you scroll quickly. It's odd the scroll bar appears to jump instantly to the scroll position as well, instead of smoothly "scrolling" there. At least that's what I'm seeing on my machine in Chrome the first time you scroll this.
-
Unfortunately my knowledge of Scroll Majic is limited. i am thinking however that the issue is not the complexity/efficiency of the gsap animation but rather that it seems to take Scroll Majic a moment to successfully take control of it the first time out, as we see an initial jump the first time we scroll past the trigger but after that it appears smooth. Presumably scroll majic's pin/duration method animates the progress position of tweens and timelines and the way you have it set up it isn't ready to execute this instantly and takes a moment to initialize everything the first time it's triggered. Assuming nobody else here jumps in with a solution you might look on scroll majic forums to see if it has been discussed there.
-
Are you sure you are accurately describing what you want, you say the sky is meant to be fixed which I interpret as unmoving yet your codpen seems to explicitly intend to move it. I suspect you actually mean an infinite scrolling sky?
-
jQuery hover may be a better solution for what you need. https://api.jquery.com/hover/ See discussions below showing use of .hover and here's a card flip using .hover
-
FWIW it seems to run fine on my imac and I checked it on an ancient windows laptop I keep around for windows testing and it ran well there too. That machine bogs down pretty easily, if it can handle it I don't see any issues.
-
See this discussion.
- 1 reply
-
- 4
-
-
It's insane what he comes up with.
-
Of course I had to listen to the interview right away. So great to hear your story Jack and how you got this all going. I guess the most interesting thing I've done with GSAP so far is a single page microsite that runs as a full window design and uses GSAP to deliver everything to the viewer kind of like an app or a presentation instead of scrolling through content. Nothing revolutionary there many others have done similar but I can say that without GSAP I probably never would have had the confidence to attempt it.
- 10 replies
-
- 3
-
-
- stories
- case studies
- (and 1 more)
-
Oh OK I think what you mean is an animated loader graphic that runs while page/assets are loading. I guess that's what most people mean by loader. Sorry I thought you were talking about a system for loading content into the slider. Referring back to an earlier post you can often avoid the need for a preloader and loader graphic if you have a system for deferring asset loading: This site for instance that I am working on is a single page site that has to load a large number of assets but it defers the loading of all but the first few so the page loads fairly quickly. Without deferring asset loading I would almost certainly need to add a loader to entertain people while they wait. http://questbrands.ca/betterbarriers Couple of interesting links below about loaders and some good ideas for loader animations. https://medium.muz.li/top-30-most-captivating-preloaders-for-your-website-95ed1beff99d
-
@DD77 Tutorial for a simple fading slideshow that cycles back to start. http://bassta.bg/2013/05/simple-fade-infade-out-slideshow-with-tweenlite/ I don't have time to figure out code for the dots but the schema would be something like this. Get the slides.length (ie the number of slides) Function to output a corresponding number of dots and click function (using an each for instance) relating index of dot to index of slides Function that would interrupt normal slide progress and go to slide selected by dot.
-
@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?
-
Thanks for the heads up Jonathan I didn't know it was deprecated.
-
If you can't seem to reproduce the issue on codepen I would suggest trying to isolate the cause in the original by stripping away all the additional animation (x,y transforms etc...) and positioning temporarily to determine if it is the bottom animation alone that isn't working or whether it's combining with another property to cause it.
-
The way this works is first it adds a css style .js to the document(html) that hides it from view using visibility: hidden while all the assets are loading. window.onload is an event that fires when the assets are finished loading, it's similar to document.ready which you may have seen before but fires later in theory when everything is loaded, including images. On this event we remove the style from the document(html) that hides it and it regains normal visibility by default. As such if you have any javascript that immediately sets or affects visibility or any other style attributes of page elements when it runs, the styles should be in place when the page becomes visible and prevent flash of unstyled content. Some info about it on MDN https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload https://developer.mozilla.org/en-US/docs/Web/Events/load It's also common to see the jQuery load method used for this: $( window ).load(function() { // Run code }); https://api.jquery.com/load-event/
-
Assuming it does not impact performance I would say it be would desirable. It is rather counter intuitive the way it needs to be handled now and likely to trip up a lot of people. And the resulting code would be simplified and easier to follow when things get complex.
-
You can also add a global handler something like this that will prevent the page from being visible until all assets are ready. In head: <style type="text/css"> .js {visibility: hidden;} </style> <script type="text/javascript"> document.getElementsByTagName('html')[0].className = 'js'; </script> Before closing body tag: <script> // assuming jQuery was loaded with assets window.onload = function() { $('html').removeClass('js');}; </script> Discussion on SO of various page load event handlers: https://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load
-
Unfortunately Adobe seems to have fallen into the morass of a big company and beaurocracy. It's no doubt all fractured product teams each trying to protect their own little kingdom. They 've lost much of the agility required to innovate. I had high hopes when they were touting XD that they would come out with a killer app and website design tool. But it's total meh.
-
If you're exporting a single object say a logo or something you can export a selection directly using Export Selection. It doesn't give you all the formatting options though.