So far I've been working on this scroll-jacking section for this website and never have used GSAP before and have gotten myself just burned out and confused on what to do.
For starters when ever you scroll up or down on the page it just passes over the section and doesn't stop to do the scroll-jacking. It should be stopping and scrolling through section one, two, and three then continue down the rest of the page and then reverse when scrolling back up the page.
Another things I've dealt with is the menu on the left is href anchors and it should go to that section when you click on it.
I'm not expecting anybody to finish my work for me but just looking for guidance on what to do from here.
Here is the CodePen Link, any help is appreciated!
My code for quick reference:
I've been reading a lot of the documentation from GSAP about using the Observer and working from a lot of examples.
//handles scroll animations with gasp nd intersection observer.
window.addEventListener('load',(e)=>{
//register gasp with scrolltrigger
gsap.registerPlugin(ScrollTrigger);
//define scroll area
const scrollArea = document.getElementById("scrollArea");
//for mobile animation differences
const mobile = window.matchMedia('(max-width: 768px)')
//only for mobile
const nav = document.querySelector('.scrollContent')
///creates scroll trigger dependant on media query.
console.log(scrollArea.clientHeight - 340);
if (!mobile.matches){
gsap.to(scrollArea, {
//as user scrolls down on desktop the slides will scroll vertically
y: scrollArea.clientHeight * -1,
scrollTrigger: {
trigger: ".scrollArea",
pin:".scrollSection",
scrub: 18,
start: "-166px 50%",
end: "bottom 1100px",
}
});
}
//basic intersection observer options
let options = {
root: null,
rootMargin: '0px',
threshold: 0.5
}
//callback function for intersection observer.
function callback(entries) {
//entries are the boxes scrolling up
entries.forEach(entry => {
const intersecting = entry.isIntersecting
document.querySelector(".scrollSection").classList.add('opacity-animate')
if(entry.target.id !== 'services'){
//to add active class when step in view
const link = document.querySelector(`[href="#${entry.target.id}"]`);
//adds active class if in view and the link doesnt contain active
if(!link.classList.contains('active') && intersecting){
console.log(entry.target.id)
link.classList.add("active")
}
//removes active for backscrolling
else if(link.classList.contains('active') && !intersecting ){
link.classList.remove("active")
}
if(intersecting ){
if( entry.target.classList.contains('opacity-none') && !entry.target.classList.contains('opacity-animate') ){
entry.target.classList.remove('opacity-none')
entry.target.classList.add( 'opacity-animate' )
}
}else{
if(entry.target.classList.contains('opacity-animate') && !entry.target.classList.contains('opacity-none') ){
entry.target.classList.remove('opacity-animate')
entry.target.classList.add(entry.target.id !== 'one' && !entry.target.classList.contains('opacity-none') ? 'opacity-none' : '')
}else{
entry.target.classList.add(entry.target.id !== 'one' && !entry.target.classList.contains('opacity-none') ? 'opacity-none' : '')
}
}
}
})
}
//create the observer object
const observer = new IntersectionObserver(callback, options);
//observe boxes
let observerIds = ['section1', 'section2', 'section3'];
observerIds.forEach((id)=>{
observer.observe(document.getElementById(id))
})
})`
Related
I try do a webite with different divs or for me they are sections. If I reached the top of one of these it should console log this term. If u ask, ScrollHeight is equal to 1% of the devices' screenheight.
let Point1 = false;
document.addEventListener("scroll", e=> {
if (document.documentElement.scrollTop >= 150*ScrollHeight) {
if (Point1 == false){
Point1 = true;
Point1F();
};
}
})
function Point1F() {
console.log("U've done it');
}
But its not woking for me.
Your code works, as i think the problem why you don't see your .log() is because you didn't reach it.
If scrollHeight is (as you said) "1% of the devices' screenheight", then you need html height to be ~ 3x your screen height;
document.documentElement.style.height = "300vh";
// getting 1% of screen height
const scrollHeight = screen.height / 100;
const scrollTriggerPoint = scrollHeight * 150;
let point1 = false;
document.addEventListener("scroll", (e) => {
if (document.documentElement.scrollTop >= scrollTriggerPoint) {
if (point1 == false){
point1 = true;
point1F();
};
}
});
function point1F() {
console.log("u've done it");
}
P.S.
Don't use variable's/function's names starting with a capital letter, use it on;y for constructor functions or classes.
Intersection Observer API
Using scroll position is fine when you have a single trigger point. However, when there are multiple trigger points (as the question suggests) and they are not in a consistent position on different devices, then the Intersection Observer API is a useful solution.
MDN:
Implementing intersection detection in the past involved event
handlers and loops calling methods like
Element.getBoundingClientRect() to build up the needed information for
every element affected. Since all this code runs on the main thread,
even one of these can cause performance problems. When a site is
loaded with these tests, things can get downright ugly.
You create an observer on the document or a container element and then add the elements you want to watch. And the callback is triggered when an element reaches the threshold setting.
Demo Snippet
The snippet shows how to observe different sections as they scroll in and out of view.
// create an observer on the document or container element
let observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
// code to execute when the section becomes visible
console.log("is visible: " + entry.target.id);
// uncomment to trigger only once per section
// observer.unobserve(entry.target);
}
}, {
root: document, // or container element or null
rootMargin: "0px",
threshold: 0.1
});
// add each section to the observer
document.querySelectorAll("section").forEach(target => {
observer.observe(target);
});
section {
height: 5em;
margin: 1em;
margin-bottom: 20em;
background-color: lightblue;
}
Scroll down the page to trigger the observer
<section id="section1">Section 1</section>
<section id="section2">Sectopm 2</section>
<section id="section3">Section 3</section>
<section id="section4">Section 4</section>
<section id="section5">Section 5</section>
I'm using this code to make the navigation bar stick to the top of the page after scrolling:
var nav=$('body');
var scrolled=false;
$(window).scroll(function(){
if(175<$(window).scrollTop()&&!scrolled){
nav.addClass('stuck');
$('.navigation-class').animate({marginTop:80},1000);
scrolled=true;
}
if(175>$(window).scrollTop()&&scrolled){
$('.navigation-class').animate({marginTop:0},0,function(){nav.removeClass('stuck');$('.navigation-class').removeAttr('style');});
scrolled=false;
}
});
The problem is, if the user scrolls the page up and down quickly, and the navigation is STILL animating, it will continue the animation and then suddenly jump into it's designed position, which gives a hiccup effect to the menu.
Try to scroll this page quickly to see it in live.
Is it possible to make it run smoothly like other websites?
Thanks are in order.
Edit:
After rereading the question, I realized the problem is probably that you're not cancelling the animation when the user scrolls back above 175px.
Presumably you're applying position: float to your nav element? Are you removing float as soon as the user scrolls up?
Try setting the queue option to false (see https://api.jquery.com/animate/), so the animation doesn't wait for the other one to complete.
Maybe you could try getting rid of the JQuery animation and replacing it with CSS transitions?
Maybe something like this?
var nav=$('body');
var scrolled=false;
var scrollToggle = function(){
$(window).off('scroll');
if(175<$(window).scrollTop()&&!scrolled){
nav.addClass('stuck');
$('.navigation-class').animate({marginTop:80},1000, function() {
$(window).on('scroll', scrollToggle);
);
scrolled=true;
}
else if(175>$(window).scrollTop()&&scrolled){
$('.navigation-class').animate({marginTop:0},0,function({
nav.removeClass('stuck');
$('.navigation-class').removeAttr('style');
$(window).on('scroll', scrollToggle);
});
scrolled=false;
}
};
$(window).on('scroll', scrollToggle);
I have something similar in a WIP myself. I'll post it here only slightly edited, maybe it can be useful to you.
var headerFloat = function() {
//Header
var pageHeader = $('#pageHeader'), pos = '',
headerMain = $('#headerMain'), headerMainHeight = '',
content = $('#content'), contentPadding = '',
pageTitle = $('h1.currentPage'), pageTitleTop = '';
if($(window).scrollTop() >= 95) {
pos = "fixed";
headerMainHeight = '75px';
contentPadding = '225px';
pageTitleTop = '55px';
contentHeaderTop = '130px';
}
//Header
pageHeader.css('position', pos);
headerMain.css('height', headerMainHeight);
content.css('padding-top', contentPadding);
pageTitle.css({ 'transition': 'all 0s', 'position': pos, 'top': pageTitleTop });
pageTitle[0].offsetHeight; //force "reflow" of element -- stackoverflow.com/questions/11131875/#16575811
pageTitle.css('transition', '');
};
$(document).ready(function() {
/* *** SCROLL -> FLOAT HEADER *** */
$(window).on("scroll.float", headerFloat);
});
Inputting '' (empty string) in the JQuery css function resets it to the original value. You should do that instead of .removeAttr('style');
I would also avoid the scrolled boolean. I think you need it anyway, if scrollTop < 175, you'll never be scrolled, and vice versa.
I'm making a vertical parallax scrolling site with ScrollMagic which includes a navigation menu at the top to link within the site.
The menu itself works correctly when no parallax animation is applied to the scroll but when the parallax is added (ie the 2nd section moves up over the intro section), it seems unable to take the reduction in overall height into account when moving to the section, so it overshoots.
Here is some code:
var site = {
smController : {},
init : function () {
site.setupScroll();
site.setupMainNavigation();
site.setupAnimation();
},
setupScroll : function () {
// init the smController
var controller = new ScrollMagic({
globalSceneOptions: {
triggerHook: "onLeave"
}
});
site.smController = controller;
},
setupMainNavigation : function () {
$('.menuclick').on('click', function (event) {
event.preventDefault();
var anchor = $(this),
sectionId = $(anchor.attr('href'));
site.scrollToSection(sectionId);
});
},
/**
* uses tweenlite and scrolltoplugin from greensock
* #param {string} sectionId id of section to scroll to
* #return {void}
*/
scrollToSection : function (sectionId) {
var scrollYPos = $(sectionId).offset().top;
TweenLite.to(window, 0.5, { scrollTo:{ y: scrollYPos } });
},
setupAnimation : function () {
// parallax animation - move marginTop back by 100%
var tween = new TimelineMax()
.to('#section1', 2, { marginTop: '-100%', ease:Linear.easeNone });
var controller = site.smController,
scene = new ScrollScene({ duration: 500 })
.setTween(tween)
.addTo(controller);
// show indicators (requires debug extension)
scene.addIndicators();
}
};
$(document).ready(function () {
site.init();
});
Does anyone have a strategy to deal with moving (parallax) sections like this please?
Thanks
In ScrollMagic 1.1 you can now provide custom scroll functions AND scroll to the beginning of a specific scene.
Read more here:
http://janpaepke.github.io/ScrollMagic/docs/ScrollMagic.html#scrollTo
I would also strongly suggest not to use animated elements as scroll targets, because their position might be different before and after initiating scroll.
If you have elements that influence the DOM height, try to take them out of the DOM flow.
You can do this for example by adding an element as a placeholder and setting your element as positioned absolutely.
hope this helps.
J
I did something like this, using a similar setup to the demo page
new ScrollMagic.Scene(settings)
.setPin(slides[i])
.on('enter', function () {
var $trigger = $(this.triggerElement()),
$nextSlide = $trigger.parent().next().find('.slide');
/*
* If there's a next slide,
* update the href of the button
* to target the next slide
* otherwise, we're at the end;
* toggle the button state so it targets
* the top of the page
*/
if ($nextSlide.length) {
$('.btn-scroll').attr('href', '#' + $nextSlide.attr('id'));
} else {
$('.btn-scroll').attr('href', '#').addClass('up');
}
})
.on('leave', function (event) {
var $trigger = $(this.triggerElement()),
$firstSlide = $('.slide:first');
/*
* If we're going back up and we pass
* the first slide, update the button
* so it targets the first slide
*/
if (event.scrollDirection === 'REVERSE' && ($trigger.offset().top === $firstSlide.offset().top)) {
$('.btn-scroll').attr('href', originalTarget).removeClass('up');
}
})
.addTo(controller);
It just needs an anchor link with the href set to the first slide.
and something like this to handle the scroll:
var scrollToContent = function (target, speed) {
if (target === '#') {
target = $('body');
} else {
target = $(target);
}
speed = typeof speed !== 'undefined' ? speed : 'slow';
$('html, body').animate({
scrollTop: target.offset().top
}, speed);
}
I have a titanium scrollView. If i make scroll action, the content is moving depending on the force of my finger scroll action. I need to make it scroll for defined value always (i.e. 400 pixels). How can i realize this?
I've tried it with $.scrollTo() and scrollingEnabled = false, but it's really not so smoothy.
Any other proposals?
ADDED
here is video of similar idea (sorry for quality)
If you want to do a kind of scrollableView, but vertical (the user can pull the scrollView, if the pull is longer than a threshold, the scrollView switch to the next vertical view, if not, the scrollView returns to its current vertical view), you can do it by using the "scroll" and "dragend" events. Here's an example for a drag down, and a scrollView with two 400px views stacked vertically:
var scrollView.top = -400; //Size of the view
var threshold = -100; // Threshold to pull for changing view
var changingPageTriggered = false;
var pulling = false;
scrollView.addEventListener('scroll',function(e) {
var offset = e.y;
if (offset <= threshold && !pulling) {
pulling = true;
changingPageTriggered = true;
} else {
pulling = false;
changingPageTriggered = false;
}
});
scrollView.addEventListener('dragend',function(e) {
if (pulling && changingPageTriggered) {
changingPageTriggered = false;
pulling = false;
changePage()
}
});
function changePage() {
scrollView.scrollTo(0,-400)
scrollView.top = 0
}
I used something similar in a project but I didn't try the code above. You'll need to tweak it and add support for the drag up, it should get you started.
I am building a mobile site and I have a slide show of images that allows sliding through images horizontally. The javascript library I'm using is bxslider. However, if one touches the slide show and wants to scroll the page up/down, the slide show blocks vertical scrolling and hence another section of the site must be touched.
Could someone please tell me how I could keep vertical scroll enabled (i.e, not allow the slideshow to block the normal scroll?)
Thanks!
Try this, Change the onTouchMove fn in the bxslider library to this
var onTouchMove = function (e) {
if (slider.settings.mode != 'fade') {
var orig = e.originalEvent;
var value = 0;
// if horizontal, drag along x axis
if (slider.settings.mode == 'horizontal')
{
var hchange = orig.changedTouches[0].pageX - slider.touch.start.x;
var vchange = orig.changedTouches[0].pageY - slider.touch.start.y;
if(Math.abs(hchange)>20 && Math.abs(hchange)>Math.abs(vchange))
{
value = slider.touch.originalPos.left + hchange;
setPositionProperty(value, 'reset', 0);
e.preventDefault();
}
// if vertical, drag along y axis
} else{
e.preventDefault();
var change = orig.changedTouches[0].pageY - slider.touch.start.y;
value = slider.touch.originalPos.top + change;
setPositionProperty(value, 'reset', 0);
}
}
}
If you goto the options page for the bxslider website, search for preventDefaultSwipeX, and preventDefaultSwipeY
Those are what you are looking for.