So I want to add a function that when I click a div it moves, but when I click something else it moves back to its original position, I want to use gsap here too. I tried using an if else statement but I didn't know want to put in here(The part where there is two stars):
let btnSide1 = document.querySelector('.button-side-one'),
btnSide2 = document.querySelector('.button-side-two'),
btnTop = document.querySelector('.button-top'),
btnBig = document.querySelector('.button-big');
if (btnSide1 = **active**) {
gsap.to(btnSide1, .5, { x: 3 })
} else {
gsap.to(btnSide1, .5, { x: 0 })
}
here is the codepen link for this: https://codepen.io/sowg/pen/GRvQxpN
I figured this out I used toggle class list for this,
Here is how it works:
// Variables
btnSide1.onclick = function () {
btnSide1.classList.toggle("activex1");
};
.activex1 { left: 30vmin !important }
So when I click on the div it moves position
You have a typo.
if (btnSide1 === active)
Related
I'm using Locomotive Scroll on a website. What i try to achieve is the following : when a section with the id #mysection is in the viewport, i'd like an icon to appear, then disappear when the section is out of the viewport.
I've tried searching in the docs and on the web ways to achieve this, but i can't figure out how to make it work. Right now, i've seen that you can launch events in the docs by using the following :
<!-- Using jQuery events -->
<div data-scroll data-scroll-call="EVENT_NAME">Trigger</div>
then in the javascript file :
import LocomotiveScroll from 'locomotive-scroll';
const scroll = new LocomotiveScroll();
scroll.on('call', func => {
// Using modularJS
this.call(...func);
// Using jQuery events
$(document).trigger(func);
// Or do it your own way 😎
});
So what i did is the following :
let serviceWebDigital;
let serviceGraphicDesign;
let serviceMarketing;
let serviceVideoMotion;
smoothScroll.on("call", (value, way, obj) => {
if (value === "serviceWebDigital") {
serviceWebDigital = TweenMax.to($(".arrow-service-1"), 1, { opacity: 1 });
} else {
serviceWebDigital = TweenMax.to($(".arrow-service-1"), 1, { opacity: 0 });
}
if (value === "serviceGraphicDesign") {
serviceGraphicDesign = TweenMax.to($(".arrow-service-2"), 1, { opacity: 1 });
} else {
serviceGraphicDesign = TweenMax.to($(".arrow-service-2"), 1, { opacity: 0 });
}
if (value === "serviceMarketing") {
serviceMarketing = TweenMax.to($(".arrow-service-3"), 1, { opacity: 1 });
} else {
serviceMarketing = TweenMax.to($(".arrow-service-3"), 1, { opacity: 0 });
}
if (value === "serviceVideoMotion") {
serviceVideoMotion = TweenMax.to($(".arrow-service-4"), 1, { opacity: 1 });
} else {
serviceVideoMotion = TweenMax.to($(".arrow-service-4"), 1, { opacity: 0 });
}
});
My issue is that when the elements enter in the viewport, the arrows appears fine. But when i scroll down then up, the arrows don't appear no more when the sections enter in the viewport. What am i missing?
Another issue is that i'd like to control when the elements appear. Right now, they appear right when the div elements enter the bottom of the viewport. Is there a way to create some "delay"? So they appear when the element is fully in the viewport for example?
EDIT :
When looking at the live code, it appears that the class that is added by locomotive is-inview when elements enter the viewport doesn't disappear when the element is out of view. That might be part of the issue here..
To quickly answer the questions about the "is-inview" class not being removed, you need to include the "data-scroll-repeat" attribute to the element.
eg: <div data-scroll data-scroll-repeat>content</div>
Regarding controlling when it triggers, I'd look at the data-scroll-offset="?, ?"
In the docs is says the 1st is bottom (when the elements enters) and 2nd is top (when the element exits). Can be a number for pixels or a percentage.
Hope that helps for part of your question at least.
As the title suggests I want to detect the start and end of a scrollable element built using overflow.
The following code works:
var scrollAmount = 150;
var scrollBox = $('.js-compare_scroll');
var arrowLeft = $('.js-compare_scroll_left');
var arrowRight = $('.js-compare_scroll_right');
var inactive = 'm-inactive';
$(arrowLeft).on('click', function () {
$(this).parent().find(scrollBox).stop().animate({
scrollLeft: '-='+scrollAmount
}, function() {
arrowRight.removeClass(inactive);
if(scrollBox.scrollLeft() === 0) {
arrowLeft.addClass(inactive);
}
});
});
$(arrowRight).on('click', function () {
$(this).parent().find(scrollBox).stop().animate({
scrollLeft: '+='+scrollAmount
}, function() {
arrowLeft.removeClass(inactive);
if(scrollBox.scrollLeft() + scrollBox.innerWidth() >= scrollBox[0].scrollWidth) {
arrowRight.addClass(inactive);
}
});
});
However the class to style the inactive colour of the arrows only appears once the animation completes. I need to add the class before the animation completes because it has a delay. I believe by default it is 400.
Is there anyway to detect this and apply the arrow classes where needed?
Thanks.
Came back from a break and realised I should take the checking if its at the end off the click event and onto a scroll event. This works a lot better now.
I have a navigation menu that upon hovering (using the hoverIntent plugin and tweenmax to animate) replaces a div with the relevant background image. I have this all working fine, but what i'm stumped with is how to prevent the action being repeated on the element that is currently selected. So for example if you hover over the first and then hover off it I don't want the action to be repeated once you hover over that one again because it is already selected. Attached is the link my fiddle http://jsfiddle.net/olichalmers/5csofnhz/1/
var homeNav = function () {
var tgt = $(this);
$("#homeImageNav a ").hoverIntent({
over: homeNavOver,
out: homeNavOff,
interval: 0
});
function homeNavOver() {
var tgt = $(this);
var bgHold = $("#bgHolder");
var bg = tgt.attr('data-bg');
if (!tgt.hasClass('current')) {
TweenMax.set($("#bgHolder"), {
opacity: 0,
background: bg,
scale: 1.1
});
TweenMax.to(bgHold, 1.5, {
opacity: 1,
scale: 1,
});
}
//tgt.addClass('current');
}
function homeNavOff() {
//if (tgt.hasClass('current')) {
//tgt.removeClass('current');
//}
}
};
And here is the homeNav function.
You just need to make changes in your function - homeNavOff like this:
function homeNavOff() {
$('#homeImageNav a').removeClass('current');
$(this).addClass('current');
}
See it in action on this fiddle
Updated your Fiddle
What I have added is:
One variable to store current selected link
Check it with the hovered link
If it is not the same then perform Background change
Else do nothing.
Update everytime any link(One or Two) is hovered
Look on this :
http://jsfiddle.net/5csofnhz/6/
If any query feel free to ask
I try to use jQuery visible plugin to detect if an element is or isn't visible in the viewport. I use a code like this:
animateFrontPage: function(){
var apps = 0;
if($('#apps-shelf').visible(true)) {
apps = 1;
if(apps == 1) {
$('#apps-shelf li').velocity("transition.bounceUpIn", { stagger: 150 });
apps = 0
}
}
}
and I run it with scroll function:
$(window).scroll(function() {
Functions.animateFrontPage();
});
The problem is - animation repeats itself with every scroll. What can I do to prevent it?
If you only want the animation to show once, what you could do is add a class to the element to flag that it is finished - then each time you only carry out the animation if the element does not have this class. Perhaps something along these lines :
animateFrontPage: function(){
var $el = $('#apps-shelf');
if($el.visible(true) && !$el.hasClass('finished')) {
$el.addClass('finished');
$el.find('li').velocity("transition.bounceUpIn", { stagger: 150 });
}
}
Update
This is the else statement you need if you want the other animation to run on these conditions : a) the animation of the first element $('#apps-shelf') has already happened and b) the element $('#apps-shelf') is no longer visible on the screen (you have scrolled past it for example)
animateFrontPage: function(){
var $el = $('#apps-shelf');
if($el.visible(true) && !$el.hasClass('finished')) {
$el.addClass('finished');
$el.find('li').velocity("transition.bounceUpIn", { stagger: 150 });
} else if (!$el.visible(true) && $el.hasClass('finished')){
//other animation here
}
}
I noticed that JointJS links can be removed by hovering over them and clicking the big red X that appears. But I was wondering if it is possible remove an element once it has been created, without knowing the variable name.
onCreateButtonClick(function(){
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 }
});
graph.addCell([rect]);
});
onRemoveButtonClick(function(){
//removeRectangle here?
});
My question is: can I remove this rectangle in the second function?
Removing elements by ID can simply be done as: graph.getCell(cellID).remove(). In your onRemoveButonClick(), you have to somehow know which element you want to remove. This depends on you application UI but you can, for example, do something like:
var selected;
paper.on('cell:pointerdown', function(cellView) {
selected = cellView.model;
});
onRemoveButtonClick(function() {
if (selected) selected.remove();
});
I implemented the removal of an element by single clicking the element , using the cellView arguement directly.
paper.on('cell:pointerclick', function(cellView, evt, x, y) {
cellView.remove();
});