Sorry, it may not be clear, I edited the codepen and got that working, but have not got the full version on my site working.
Initially it was not working as I had timeline.to() outside of the event listener.
I was getting the error GSAP target #recipeContainer h2 not found.
Once I added it into the event listener it worked.
However it doesn't work on my website, it does work on my website if i use a test div with already defined div/h2 but not if i try to use the dynamic elements.
then i still face the element not found error.
The only thing I can think of is how the getRecipe() function runs.
Could it be that it is because the dynamic content that is added on the real site is from an api call that is parsed and the recipe titles are extracted from an array of objects then wrapped in the <h2> tags? So maybe it delays it further which is why it cannot be found?
This is the code for getRecipe
function getRecipe(){
let ingredients = document.querySelector('#ingredient').value
// let numberOfMissingIngredients = document.querySelector('#missingIngredients').value
//Url of spoonacular api, with authentication key(got by making an account). Type in ingredients to get an Array of Recipe titles
let url =`https://api.spoonacular.com/recipes/complexSearch?&apiKey=2d7e0ded8af74b1897224317ce6c662c&includeIngredients=${ingredients}&addRecipeInformation=true&instructionsRequired=true&number=20&fillIngredients=true&addRecipeNutrition=true`
fetch(url)
.then(res => res.json()) // parse response as JSON
.then(data => {
console.log(data) //get the response(array) of the api
console.log(data.results.length) //title of the first recipe
//Add the the array of recipe objects to the global variable for access later
recipeArray = data.results;
console.log(`recipe array before ${recipeArray}`)
//sort the recipes by least to most missing ingredients
recipeArray = recipeArray.sort((a,b) => a.missedIngredientCount - b.missedIngredientCount)
console.log(`recipe array after ${recipeArray}`)
//This is a function that wraps the titles of the returned recipes in <h2> and <a> tags to input into the dom
let recipeTitles = function(){
return recipeArray.map((el, i) => `<h2><a href="#" class="recipeTitles" id="${el.id}">${el.title}</a> -- ${el.missedIngredientCount} ingredient${el.missedIngredientCount > 1 ? 's' : ''} missing</h2>`).join('')
}
document.querySelector('#recipeTitleContainer').innerHTML = recipeTitles()
//data.map(el => el === `<p>${el.title}</p>`)
})
.catch(err => {
console.log(`error ${err}`)
});
}