Replicating GSAP ScrollTrigger effect with vanilla JS - javascript

So, say there is a recurring function with requestAnimationFrame to move an image from left: 0 all the way to left:100% where its change in value is dependent on the scrollY value received through a 'scroll' eventListener..
The parent of this image is a div with min-height: 100vh.
I want to replicate the GSAP's scrollTrigger function with vanilla JS which would keep extending the parent's height over 100vh until the image's left value has reached 100%. After that the parent div will no longer expand its height and will also scroll up with the image.
Basically, I am just looking for a way to make this scrollTrigger function happen with vanilla JS. Would this be the ideal approach for it?
position: sticky is not the solution here as I want to make the user feel that the rest of the DOM elements below are 'held' down and can't be scrolled in view till the image 's left value turns to 100%.
In other words, how to make the parent div's height high enough that the entire animation on the child is completed till you reach the div's bottom by scrolling?
I hope I made sense.
<div class="parent">
<img src="image.jpg" alt="">
</div>
A working demo of what I need is the effect on this CodePen. You can see that the text Cool, right? is not scrolled into view till the entire shoe is created:
CodePen link

Related

Angular 6 background image crossfade animation

I have a problem with an animation in angular 6. I'm not sure if i'm doing everything right, but i have prepared stackblitz with a part of code of my component.
What I want to achieve is smooth animation when the item appears when *ngIf statment is fulfilled, but now it looks like the states of two children elements placed in crossfade-images component are treated like one element (i'm not sure if my assumptions are correct). But i wanted to do something looking like: on first load first item slides down from the top, after some interval this item should slide down, and in the same time another child of crossfade-images should slide from the top and it should happen in infinite loop
Could you guys check my stackblitz and give me a hand?
Stackblitz
The trouble that you are having is that transform: 'translateY(-100%)' positions the elements and then applies the transform after they are positions. Thus, the way that you have it set up is:
The boxes indicate where the images are positioned, with yellow being the first image and red being the second. What you will want to do is position:absolute your images (with the container being position:relative and transition from bottom: "100%" to top:"100%"
https://angular-gwxfta.stackblitz.io
I have left transformY(-100%) and just added position: relative to parent container, and position: absolute to children divs and it works as I wanted. Thank you so much.
Link to working code on Stackblitz

Hide child <div>s as parent div shrinks?

I am trying to write a zoom in/out feature on a web app I am making using the jqueryUI slider.
I am having difficulty handling when my parent div shrinks too much, and cramps its child containers.
<div class="puck originator inline-block" style="width: 310.5px; left: 0px;">
<div class="conflicted inline-block originator">
<div class="right-number">I should stay</div>
<div class="left-number">I should stay</div>
<div class="middle-number">I Should disapper</div>
</div>
</div>
Here is the relevant section of code I have
http://jsfiddle.net/aQKwE/
Basically I have the parent div (class 'puck') that is being shrunk using a jquery slider. For this code I just used a text box, but same idea.
When I shrink that div, the containing divs stick around and are very garbled.
I want to be able to remove the middle child div when it becomes to cramped, leaving the left and right child divs to occupy all the space
Furthermore, if it becomes to cramped yet after that, I want to remove the right div, leaving only the left.
Finally I want to be able to remove all contents so that nothing more than the background of the parent shows.
Is there a way to do this easily, preferably through CSS? I don't want to write more javascript code to set 'display:none' on each child div, since it seems like some CSS rules should handle this.
Any ideas?
There's not really any logic built into CSS to handle something like this. You can set rules based on viewport size, but that won't help in this case.
I updated your jsfiddle with this code so you can test it and see what you think, but essentially I just added some checks in your javascript function to hide based on the width submitted.
var newwidth = $('#text').val();
$(".middle-number").show();
$(".right-number").show();
if (newwidth < 280) {
$(".middle-number").hide();
}
if (newwidth < 180) {
$(".right-number").hide();
}
$('.puck').css('width',newwidth);

How to implement a vertical slide controller in a height limited div with many objects

I'm nearly 2 months old in studying HTML, JavaScript and jQuery. I've done a few things but never figured out how to implement a DIV (or anything you may suggest) to emulate a viewport which would display text, textarea, buttons, anchors etc all of which simply cannot fit or be seen within the size of the viewport. Therefore the use of the vertical scroll. No need for horizontal scrolling, though. I can format the objects not to exceed the horizontal view. I thought of using a div inside another div, but the objects inside the INNER DIV just bleed through and show up on the bottom of the site!
Is there some magical panel in jQuery created for that purpose?
TIA
Dennis
If you have a containing div such as <div id="container">, you can add the following properties to it to get it's content to scroll vertically:
div#container {
overflow-y: auto;
height: 100px;
}
This CSS will show a vertical scroll bar if the div's content exceeds it's height. The only caveat with this solution is you must set a height on the div.
Here's an example.

Connecting repeatable and non-repeatble backgrounds without a seam

I have a 700x300 background repeating seamlessly inside of the main content-div. Now I'd like to attach a div at the bottom of the content-div, containing a different background image that isn't repeatable, connecting seamlessly with the repeatable background above it. Essentially, the non-repeatable image will look like the end piece of the repeatable image.
Due to the nature of the pattern, unless the full 300px height of the background image is visible in the last repeat of the content-div's backround, the background in the div below won't seamlessly connect. Basically, I need the content div's height to be a multiple of 300px under all circumstances. What's a good approach to this sort of problem?
I've tried resizing the content-div on loading the page, but this only works as long as the content div doesn't contain any resizing, dynamic content, which is not my case:
function adjustContentHeight()
{
// Setting content div's height to nearest upper multiple of column backgrounds height,
// forcing it not to be cut-off when repeated.
var contentBgHeight = 300;
var contentHeight = $("#content").height();
var adjustedHeight = Math.ceil(contentHeight / contentBgHeight);
$("#content").height(adjustedHeight * contentBgHeight);
}
$(document).ready(adjustContentHeight);
What I'm looking for there is a way to respond to a div resizing event, but there doesn't seem to be such a thing. Also, please assume I have no access to the JS controlling the resizing of content in the content-div, though this is potentially a way of solving the problem.
Another potential solution I was thinking off was to offset the background image in the bottom div by a certain amount depending on the height of the content-div. Again, the missing piece seems to be the ability to respond to a resize event.
Another approach is to calculate the background-position style for the bottom and top DIVs based on the size of the content DIV. You can use negative positions to align the bottom of one to the top of another.
Yet another approach is to use a layered DIV approach in which the top, content and bottom are all children of a parent DIV that contains the background.
The benefit of these approaches is that it doesn't change the natural rendering of the content DIV simply for managing the background.
Example: http://bin.googlecode.com/svn/trunk/css/repeating-bg-content.html
Could setting background-position: fixed in your css help? Then your bottom div could move, but its background image would remain fixed in relation to the top of the page. As more of your repeating image was revealed, so more of your bottom image would be hidden.
This would comes under the heading of "offset the background image in the bottom div by a certain amount depending on the height of the content-div", rather than "the content div's height to be a multiple of 300px under all circumstances".
You could try adding an event listener to the div:
var div = document.getElementById("content");
div.addEventListener("resize", adjustContentHeight, false);
If nothing needs to match up at the top, position the repeating image at the bottom of the div (so the overflow will spill over the top). Like this:
div#repeating { background: transparent url('/path/to/image') repeat left bottom; }

JQuery: How to make DIV within Scroll window focused?

I have the following HTML/CSS:
#scrollpanel{height:100px;overflow-x:hidden;overflow-y:scroll;width:200px}
<div id="scrollpanel">
<div class="listing ref_1">...</div>
<div class="listing ref_2">...</div>
<div class="listing ref_3">...</div>
...
</div>
As you can see, the scrollpanel is a scrollwindow defined to have a height of 100px and width of 200px.
How can I programmatically scroll the scrollpanel scrollbar/window to make a particular DIV focused/viewable, even if that DIV is not not currently viewable?
For example, say I have 10 DIVs (ref_1 to ref_10). Only 3 of the ref_ DIV can be viewable at a time based on the height of scrollpanel window. Now let's say I want to have the scrollbar auto scrolled to DIV ref_7, which is currently not viewable. How do I programmicatly have the scrollwindow scroll to and focus on ref_7?
Use the jQuery ScrollTo plugin, it's as simple as:
$('#scrollpanel').scrollTo('.ref_7');
You can scroll an element into view by using element.scrollIntoView().
I would take a look this plugin.
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Depending on what you need there may be a simpler solution without using a plug-in if you just want to scroll.

Categories